Free Astro Starter Template | SolidJS + Tailwind

We’re releasing the Wumty Starter Kit as a free, open-source Astro template. It’s the same foundation that powers our Single Site, Studio, and Agency plans, stripped down to the essentials so you can start building immediately.

No signup. No email gate. Just clone and go.

What’s in the Starter Kit

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

Core Stack:

Astro 6 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 Kit 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

Clone the Starter Kit and install dependencies:

git clone https://github.com/wumty/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 Kit is free forever. When you need more, the upgrade path is straightforward:

Single Site ($149 one-time) adds:

1 industry template with pre-built content
Content Collections with Zod-validated schemas
Blog system with categories and filtering
Contact forms and FAQ pages
Schema.org structured data (JSON-LD)

Studio ($399 one-time) adds:

Every industry template (current + future)
Calculator Kit with 225+ engines
Up to 10 production sites
1 year priority support

Agency ($799 one-time) adds:

Unlimited client sites
Monorepo architecture with shared packages
Per-site theming system
White-label delivery rights

Every plan builds on the same Starter Kit foundation, so your customizations carry forward. No rewriting. No migration headaches.

Download the Starter Kit and start building, or compare all plans on our pricing page.

Download the Starter Kit and start building today. It’s free, open source, and achieves top Lighthouse performance. When you’re ready for content collections and client work, check out the Single Site or full pricing.

Free Astro Starter Template With SolidJS + Tailwind