What I Built
Astro Rocket is a production-ready Astro 6 starter that ships as a complete, styled website — not a blank slate. Clone it, update the text, go live. Everything else is already done.
It covers everything a serious portfolio or marketing site needs: a full design system, 57+ components, 12 live-switchable colour themes, dark mode, blog, projects, content collections, full SEO, RSS, sitemap, structured data, i18n scaffolding, and a suite of polished UI interactions — all wired together, all working on day one.
It’s built for designers, freelancers, and developers who want a site that genuinely impresses from the moment it launches.
12 Themes. Switch in Seconds.
The theme switcher is one of Astro Rocket’s most satisfying details. Twelve colour themes — Indigo, Orange, Emerald, Violet, Rose, and seven others — toggle instantly in the header. Click a colour, and every button, link, badge, progress bar, and accent on the page updates in a single frame. No waiting, no code changes, no deploy.
The secret is CSS custom properties scoped to data-theme attributes on <html>. The browser does all the work — the server never needs to know.
57+ Components, Six Categories
The component library is the core of the project. Every component is built for Astro, typed with TypeScript, styled with Tailwind CSS, dark-mode-aware, and theme-aware:
- UI — Badge, Button, Card, Alert, Toast, Tooltip, Progress, Table, Avatar, Accordion, Tabs, Dialog, Dropdown, Skeleton
- Patterns — Feature grids, pricing tables, testimonials, stats, step-by-step flows
- Layout — Header variants, Footer, PageLayout, Section wrappers
- Blog — PostCard, AuthorBio, TagCloud, RelatedPosts, ReadingTime
- Landing — Hero variants, CTA sections, social proof, FAQ, tech stack grid
- SEO — Breadcrumbs, structured data, Open Graph, canonical, sitemap, robots
Auto-Generated Branding
Change siteConfig.name and the logo badge and favicon update at runtime — automatically, in the right brand colour, with no design tools required. This is the detail that makes Astro Rocket genuinely forkable: new name, new colour, new site.
SEO — The Complete Stack
Most starters ship three meta tags and call it SEO. Astro Rocket ships the complete implementation:
- JSON-LD structured data —
WebSite,Organization, andPersonschemas on the homepage;BlogPostingon every post — 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; submit once to Search Console
- Per-page robots control —
noindex/nofollowon any page via a prop - Search Console verification — Google and Bing codes via
.env, no template edits
The Interactions
Scroll progress bar. A 2px brand-coloured line runs along the bottom of the fixed header and fills as you scroll. Enabled on the homepage, blog index, and individual posts. Smooth, passive, requestAnimationFrame-throttled.
Scroll progress ring. As you scroll down the page, a thin arc traces around the back-to-top button — clockwise, from empty at the top to fully drawn at the bottom. It’s a quiet, satisfying way to know where you are on a long page without looking at a scrollbar. Click the button and you’re back at the top. The arc colour follows the active theme automatically — switch to a different colour and it updates instantly, no extra code needed.
Typing effect. The hero headline cycles through configurable phrases. The width is locked to the longest word before the animation starts, using a hidden off-screen measurer that inherits the exact computed font metrics — so the layout never shifts. A Core Web Vitals detail most typing effects get wrong.
Scroll reveal. Elements with data-reveal fade and slide into view as they enter the viewport via IntersectionObserver. The hero and all major sections animate in on load.
Dark Mode — Done Right
Dark mode uses sessionStorage rather than localStorage. The difference: every new tab resets to the intended theme. A visitor who switched modes out of curiosity arrives back in the right one. First impressions are intentional, every time.
Zero JavaScript by Default
Astro’s island architecture means every page ships pure HTML unless a component explicitly needs JavaScript. Interactive islands — theme switcher, contact form, typing effect, scroll indicators — hydrate themselves. Everything else stays static. The result: Lighthouse scores of 95+ across all four categories, fast on any device, on any connection.
Open Source
Astro Rocket is open source under the MIT licence and submitted to the official Astro themes directory. It’s built to be forked, customised, and shipped — that’s the whole point.