Technologies
Astro

Astro

Fast and modern Astro templates and components to build content-focused websites with optimal performance.

Overview

Our Astro products provide static site templates, components, and integrations that help you build incredibly fast websites with Astro's component islands architecture.

Features

  • 🚀 Blazing Fast - Optimized for performance
  • 📦 Component Islands - Ship less JavaScript
  • 🎨 Framework Agnostic - Use React, Vue, Svelte, or vanilla
  • 📱 Fully Responsive - Mobile-first design
  • 🔍 SEO Optimized - Built-in SEO features
  • ⚡ Static by Default - Pre-rendered for speed
  • 🌙 Dark Mode - Dark/light theme support
  • 📝 MDX Support - Write content in MDX
  • 🎯 TypeScript - Full TypeScript support

Getting Started

Installation

  1. Purchase and download the Astro template from designtocodes.com (opens in a new tab)
  2. Extract the files to your project directory
  3. Install dependencies:
npm install
# or
yarn install
# or
pnpm install

Development

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:4321 (opens in a new tab) in your browser.

Building for Production

Create an optimized production build:

npm run build

Preview the production build:

npm run preview

Available Products

Astro Site Templates

Complete website templates:

  • Documentation sites
  • Blog platforms
  • Portfolio websites
  • Landing pages
  • Marketing sites
  • E-commerce stores

Astro Components

Reusable components:

  • Layout components
  • Navigation components
  • Content components
  • Form components
  • Card components
  • Section components

Astro Integrations

Pre-configured integrations:

  • Tailwind CSS
  • MDX
  • React components
  • Vue components
  • Svelte components
  • Image optimization

Project Structure

astro-template/
├── src/
│   ├── components/     # Astro components
│   ├── layouts/        # Page layouts
│   ├── pages/          # Route pages
│   ├── content/        # Content collections
│   └── styles/         # Global styles
├── public/             # Static assets
└── astro.config.mjs    # Astro configuration

Key Features Explained

Component Islands

Astro ships zero JavaScript by default:

---
// src/components/Counter.astro
let count = 0
---
 
<div>
  <button onclick={() => count++}>Count: {count}</button>
</div>

Framework Components

Use React, Vue, or Svelte components:

---
// src/pages/index.astro
import MyReactComponent from '../components/MyReactComponent.jsx'
import MyVueComponent from '../components/MyVueComponent.vue'
---
 
<MyReactComponent client:load />
<MyVueComponent client:visible />

Content Collections

Organize content with collections:

---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content'
 
const posts = await getCollection('blog')
---
 
{posts.map(post => (
  <article>
    <h2>{post.data.title}</h2>
    <p>{post.data.description}</p>
  </article>
))}

Customization

Configuration

Customize Astro in astro.config.mjs:

import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import tailwind from '@astrojs/tailwind'
 
export default defineConfig({
  integrations: [react(), tailwind()],
  site: 'https://example.com',
})

Styling

Use CSS, Tailwind, or any CSS framework:

---
// src/components/Card.astro
---
 
<div class="card">
  <slot />
</div>
 
<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

Routing

Astro uses file-based routing:

src/pages/
  index.astro          → /
  about.astro          → /about
  blog/
    index.astro        → /blog
    [slug].astro       → /blog/:slug

Performance

Image Optimization

Use Astro's Image component:

---
import { Image } from 'astro:assets'
import myImage from '../assets/image.jpg'
---
 
<Image src={myImage} alt="Description" />

Code Splitting

Astro automatically code-splits:

---
// Only loads when visible
import Component from '../components/Component.jsx'
---
 
<Component client:visible />

Deployment

Vercel

  1. Push to GitHub
  2. Import in Vercel
  3. Deploy automatically

Netlify

  1. Connect repository
  2. Build command: npm run build
  3. Publish directory: dist

Other Platforms

Astro works on any static hosting:

  • GitHub Pages
  • Cloudflare Pages
  • AWS S3
  • Any static host

Support

FAQ

Can I use React/Vue components?

Yes, Astro supports React, Vue, Svelte, and more. Import and use them with client directives.

Is Astro just for static sites?

Astro can generate static sites or use server-side rendering (SSR) with adapters.

How fast are Astro sites?

Astro sites are incredibly fast because they ship minimal JavaScript and pre-render pages.

Ready to build? Purchase Astro templates from designtocodes.com (opens in a new tab)

Tailwind CSSFigma