Free Astro Starter Template With SolidJS + Tailwind

We’re releasing the Amrify Starter as a free, open-source Astro template. It’s the same foundation that powers the full Amrify boilerplate, stripped down to the essentials so you can start building immediately.

Free and MIT licensed. The public repo opens with the product launch - once it’s live, it’s clone and go, no strings.

What’s in the Starter

The Starter is a production-ready Astro 7 template built with SolidJS for interactive islands and Tailwind CSS 4 for styling. Here’s what you get:

Core Stack:

• Astro 7 with static site generation
• SolidJS for interactive components (theme toggle, mobile menu)
• Tailwind CSS 4 with CSS-first configuration
• TypeScript throughout

Features:

• Dark mode with zero-FOUC theme switching
• Responsive layouts that work on every screen size
• SEO fundamentals (meta tags, Open Graph, canonical URLs)
• Top Lighthouse performance out of the box
• View Transitions API with smooth page navigation
• Accessible markup following WCAG guidelines

Developer Experience:

• Hot module replacement in development
• Clean project structure with clear conventions
• Minimal dependencies (no bloat)
• MIT license for personal and commercial use

Why SolidJS Instead of React

Most Astro templates use React for interactive components. We chose SolidJS for three reasons:

1. Smaller bundle size. SolidJS compiles to direct DOM operations with no virtual DOM runtime. The theme toggle component is 1.2KB gzipped with SolidJS vs. 4.8KB with React (including the React runtime).

2. Better performance. No virtual DOM diffing means faster updates. For the few interactive components in a content site (theme toggle, mobile menu, form validation), SolidJS runs measurably faster.

3. Familiar syntax. If you know React, you know SolidJS. The JSX is nearly identical. The main difference: SolidJS uses signals instead of useState, which means components render once and fine-grained reactivity handles updates.

// SolidJS component - looks like React, runs faster
import { createSignal } from "solid-js";

export function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}
    </button>
  );
}

Why Tailwind CSS 4

Tailwind CSS 4 shipped with CSS-first configuration, meaning you define your design tokens in CSS instead of JavaScript:

@theme {
  --color-primary: #6366f1;
  --color-secondary: #4f46e5;
  --font-sans: "Inter", sans-serif;
}

This integrates with Astro’s build pipeline more cleanly than the JS-based config of Tailwind v3, and the output is smaller because the new engine generates more efficient CSS.

The Starter includes a clean theme token system that you can customize in one file to match any brand.

Dark Mode That Actually Works

Dark mode sounds simple until you implement it. The common pitfalls:

• Flash of wrong theme on page load (theme loads after CSS paints)
• Flash during navigation when using view transitions
• Transitions animating during theme switch (everything slides/fades)

Our implementation solves all three with an inline head script, astro:before-swap listener, and scoped transition suppression. Read the technical details in our Lighthouse guide.

The result: seamless theme switching that respects system preferences, persists user choice, and never flashes.

Project Structure

starter-kit/
├── src/
│   ├── config/          # Site config (name, logo, colors)
│   ├── content/         # Markdown content
│   ├── layouts/         # Page layouts
│   ├── pages/           # Astro page routes
│   └── styles/          # Global CSS & theme tokens
├── public/              # Static assets
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json

Clean, conventional, and easy to navigate. No hidden magic.

Getting Started

At launch, getting started is two commands (the public repo opens with the product launch - join the founding list to get the link the moment it’s live):

git clone https://github.com/amrify/starter.git my-site
cd my-site
pnpm install
pnpm dev

Open http://localhost:4321 and start building. Edit src/config/site.json to set your site name, logo, and branding. Add pages by creating new .astro files in src/pages/. When you are ready to deploy, run pnpm build to generate the static output in dist/, then push to Netlify, Vercel, or Cloudflare Pages - all three platforms auto-detect Astro projects and deploy with zero configuration.

Upgrading When You’re Ready

The Starter template is free forever. When you need more, there is exactly one upgrade:

The Amrify boilerplate ($249 one-time founding price for the first 5,000 members, then $399) adds:

• Every niche template - 30+ niches, 10 production-ready at launch, all future ones included
• Content Collections with Zod-validated schemas
• Blog system, contact forms, FAQ pages, and Schema.org structured data (JSON-LD)
• The monorepo architecture: shared packages, per-site theming, unlimited sites
• The AI setup kit for Claude Code, Cursor, and Copilot
• Docs, video tutorials, and lifetime updates

The boilerplate builds on the same Starter foundation, so your customizations carry forward. No rewriting. No migration headaches.

---

Start building today. The Starter is free, open source, and achieves top Lighthouse performance. When you’re ready for every template and the full monorepo, the boilerplate is one purchase.