Astro Rocket is a free, open-source Astro 7 starter theme that bundles a 44-component library, 12 live colour themes, static search, i18n, and a full blog into a single boilerplate for building marketing sites, portfolios, and blogs.
What is Astro Rocket?
Astro Rocket is a free, MIT-licensed starter theme built on Astro 7 and Tailwind CSS v4, created by Hans Martens. It takes a site configuration file and content collections as input and produces a fully static website with blog, projects, SEO tags, an OG image generator, and optional serverless API routes for a contact form and newsletter. The theme ships with 44 accessible TypeScript components, a three-tier design-token system, and a header with live colour-theme switching. A live demo is available at astrorocket.dev, and the source repository is github.com/hansmartensdev/astro-rocket.
Key Features
- Astro 7 + Tailwind CSS v4 — Built on Astro 7 with the Rust compiler, Vite 8, the Content Layer API, and CSS-first Tailwind configuration using OKLCH colors and fluid typography.
- 44 components — 34 UI, 7 pattern, 2 layout, and 1 hero component, all TypeScript-typed, with variants managed by class-variance-authority.
- 12 colour themes — Orange, Amber, Lime, Emerald, Teal, Cyan, Sky, Blue (default), Indigo, Violet, Purple, and Magenta; switching themes updates brand colors live without a rebuild.
- Static search (Pagefind) — A ⌘K / Ctrl+K command-palette modal backed by a build-time Pagefind index; zero JavaScript until the modal opens.
- Opt-in i18n — Enables locale-prefixed routes, a language switcher, hreflang tags, and a translation helper; ships English and Dutch dictionaries out of the box.
- Content collections — Type-safe blog, projects, authors, and FAQs with Zod validation, including per-post table of contents, blog comments, and project galleries.
- SEO toolkit — Meta tags, JSON-LD schemas (WebSite, BlogPosting, FAQ, Breadcrumb), dynamic sitemap, robots.txt, and statically generated 1200×630 OG images.
- Bundled pages — Locale-aware home, About, Services, and Contact pages plus a full blog and portfolio projects section, with header and footer navigation configured separately.
Who is it for?
- Web designers — Use the 12 colour themes and design tokens to brand a site in minutes, then remove the theme selector once a colour is chosen.
- Developers — Build on a TypeScript component library with Astro islands for React interactivity where needed, and deploy to Vercel, Netlify, or Cloudflare Workers.
- Bloggers — Publish MDX posts with automatic table of contents, comments (Giscus, Cusdis, or Artalk), YouTube facades, and optional newsletters.
- Freelancers and agencies — Ship a client portfolio with project galleries, contact form, and multi-language support without starting from zero.
What can you do with Astro Rocket?
- Launch a marketing site — Use the bundled home, About, Services, and Contact pages with a newsletter signup and live colour and dark-mode switching.
- Run a multi-language blog — Enable the built-in i18n, drop posts in folders like
src/content/blog/en/ and nl/, and get locale-prefixed routes, hreflang, and a language switcher automatically.
- Showcase portfolio projects — Add a
gallery array or the ProjectGallery MDX component for swipeable carousels with a click-to-zoom lightbox and optional video slides.
- Publish with SEO and comments — Get build-time OG images, JSON-LD, sitemap, and comment threads via Giscus (GitHub Discussions) or privacy-friendly Cusdis.
How does Astro Rocket work?
- Clone the repository with git, install dependencies with pnpm, copy
.env.example to .env, and set SITE_URL.
- Configure the site name, navigation, and theme in
src/config/site.config.ts, src/config/nav.config.ts, and the theme CSS files.
- Write content as MDX files in the content collections, then run
pnpm dev to preview or pnpm build to generate a static site with the Pagefind index.
Pricing
The theme is free and open source under the MIT license. No paid tier or premium components are mentioned.
FAQ
Is Astro Rocket free?
Yes, Astro Rocket is free and MIT-licensed, including all 44 components, 12 colour themes, i18n, and the Pagefind search integration.
What Node.js version do I need?
Node.js 22.12.0 or newer is required because Astro 7 depends on it; pnpm 9.x is recommended.
Does search work in development?
No — the Pagefind index is generated only during pnpm build, so under pnpm dev the search modal reports no results; run pnpm build && pnpm preview to test search locally.
Can I use my own logo?
Yes, set branding.logo.image in site.config.ts to any file in public/, and the auto-generated monogram (first letter of the site name) is replaced across the header, footer, and logo components.
Blog comments can use Giscus (GitHub Discussions), Cusdis (hosted or self-hosted), or Artalk (self-hosted), chosen via comments.provider; they are lazy-loaded and off by default.
