What Astro Rocket is
Astro Rocket is a production-ready Astro 6 starter that ships as a complete, styled website — not a blank slate. Clone the repo, change the text in site.config.ts, and you have a portfolio site ready to go live: design system, blog, projects, contact form, SEO layer, twelve colour themes, and a hundred small details all wired together and working on day one.
It’s open source under the MIT licence and listed on the official Astro themes directory.
The stack
Astro 6, Tailwind CSS v4, TypeScript. No SPA, no client-side routing, no global state library. Every page is statically generated; interactive bits ship as Astro islands and hydrate only where they need to. Themes, design tokens, spacing, and typography all run through CSS custom properties, so the browser does the work and the server never has to render twice.
Twelve themes, switched live
Twelve colour themes — Orange, Amber, Lime, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Magenta — are surfaced as swatches in the header. Click one and every button, link, badge, gradient, hero accent, and progress bar updates in a single frame, along with the auto-generated logo monogram and the favicon. The mechanism is a single data-theme attribute on <html>; switching swaps the attribute and the CSS handles the rest. No build step, no rebuild, no rerender.
The selector can stay in the header for sites that want to show off the system, or be removed once a brand colour has been chosen. The full token architecture — reference, semantic, component layers — is broken down in How Astro Rocket’s Design System Works.
Auto-generated branding
Change siteConfig.name and the logo badge and favicon update everywhere. The logo is rendered as a monogram — first letter of the site name, on the active brand colour. The favicon is drawn at runtime in the same style and served as an SVG endpoint, redrawing the moment the theme or colour mode changes. New name, new colour, new site, no design tools required. Every available toggle is documented in the configuration guide.
57+ components, six categories
Every component is built for Astro, typed with TypeScript, dark-mode aware, and theme-aware. Browse them all on the components page:
- UI (33) — Button, Card, Badge, Alert, Toast, Tooltip, Progress, Table, Avatar, Accordion, Tabs (horizontal and vertical), Dialog, Dropdown, Skeleton, Pagination, Separator, CodeBlock, the full form-field set (Input, Textarea, Select, Checkbox, Radio, Switch), and the marketing pieces (Logo, CTA, NpmCopyButton, SocialProof, TerminalDemo)
- Patterns (7) — ContactForm, NewsletterForm, SearchInput, StatCard, and the larger composed blocks
- Hero, Layout, Blog, Landing, SEO — hero variants, header and footer, post cards and tag clouds, landing-page sections (CTA, Credibility, FeatureTabs, LighthouseScores, TechStack), and the SEO components (
SEO,JsonLd,Breadcrumbs)
Iconify, not a custom set
Icons run through a unified Icon component that works in both Astro and React. Behind it sits Iconify, with two icon sets enabled by default: 350+ Lucide icons for UI and 3000+ Simple Icons brand icons for tech logos. Adding a new icon is a single string. Bundles only ship the icons the page actually uses — Iconify resolves them on demand at build time.
SEO — the complete stack
Most starters ship three meta tags and call it SEO. Astro Rocket ships the full implementation:
- JSON-LD structured data —
WebSite,Organization, andPersonon the homepage;BlogPostingon every post — the prerequisites for rich results in Google Search - Open Graph + Twitter Cards — full social metadata on every page, with post cover images wired in automatically
- Canonical URLs — constructed from the production domain, correct across staging and preview environments
- Auto-generated sitemap — every page included at build time
- Per-page robots control —
noindex/nofollowon any page via a prop - Search Console verification — Google and Bing codes via
.env, no template edits - Static OG image — a polished default served as the social preview without any build-time generation
RSS lives at /rss.xml, robots.txt is generated, the manifest is a generated webmanifest endpoint. None of them are hand-edited.
Three-state colour mode
The dark-mode toggle is a System / Light / Dark dropdown rather than a binary switch. The active state is checkmarked, with a “Currently dark” / “Currently light” sub-line under System so visitors know what it resolves to on their device. The choice persists in localStorage and tracks prefers-color-scheme live whenever System is selected. A chevron next to the icon signals a discoverable control, not a mystery glyph.
Animation, considered
Every entrance uses the same spring curve — cubic-bezier(0.22, 1.6, 0.36, 1) — with the second control point above 1.0 to produce a small overshoot that snaps back. Things arrive rather than stop. The same curve drives the hero stagger, the floating header’s drop-in, and every scroll-reveal transition.
The reveal system has three modes:
data-revealfor single elements, with up / down / left / right / scale variantsdata-reveal-childrenfor cascading grids — each child staggered behind the last with a tunable--reveal-staggerdata-reveal-contentfor long-form pages, where every paragraph, heading, and code block springs in individually as the reader scrolls
All three use an IntersectionObserver with a 15% threshold and a small negative bottom margin, so the animation plays when the element is genuinely on screen. A scroll progress bar runs along the header edge, a circular back-to-top arc fills as you scroll the page, and a hero scroll-indicator gently chevrons downward until you take the hint. Reduced-motion users get static states by default. The full technical breakdown is in Animations in Astro Rocket.
Lighthouse: 100 across the board
Astro Rocket scores 100/100/100/100 on both desktop and mobile, tested on the live demo at astrorocket.dev — Performance, Accessibility, Best Practices, and SEO. That’s not a tuned benchmark page; it’s the full site with the theme switcher, the typing headline, the animations, and the contact form. The scores are a side-effect of decisions made throughout the build: static-first rendering, the built-in image pipeline, WCAG-conformant components by default, and the full SEO stack rather than three meta tags.
Lighthouse runs in a simulated environment, so your own results can drift by a point or two depending on network and CPU throttling. For apples-to-apples results, run the audit on pagespeed.web.dev.
Zero JavaScript by default
Astro’s island architecture means every page ships pure HTML unless a component explicitly needs JavaScript. Interactive islands — the theme switcher, the contact form, the typing effect, the scroll indicators — hydrate themselves. Everything else stays static.
Open source
Astro Rocket is open source under the MIT licence, submitted to the official Astro themes directory, and free for any project — personal, commercial, or both. The repo is at github.com/hansmartens68/Astro-Rocket.