Velocity is a production-ready Astro 6 boilerplate starter template with Tailwind CSS v4, TypeScript, and 57 pre-built components, created by Southwell Media and released under the MIT license.
What is Velocity?
Velocity is a production-ready starter template for building content-driven websites on Astro 6 and Tailwind CSS v4. It outputs a fully configured Astro project with blog content collections, API routes, SEO tooling, theming, and React islands for optional interactivity. The template is free and open source under the MIT license.
Key Features
- Component library — 57 accessible, typed components across 7 categories, including ContactForm, SearchInput, StatCard, ArticleHero, BlogCard, ShareButtons, RelatedPosts, Credibility, TechStack, FeatureTabs, Header, Footer, and ThemeToggle.
- Design token system — OKLCH colors, fluid typography, and spacing tokens in src/styles/tokens, with two built-in themes (default and midnight) selectable in src/styles/themes.
- SEO toolkit — meta tags, JSON-LD, sitemap, robots.txt, and auto-generated Open Graph images.
- Content collections — type-safe blog, pages, authors, and FAQs validated with Zod in src/content.
- API routes — contact form and newsletter endpoints with validation, ready for backend integration.
- React islands — optional client-side interactivity using React inside Astro's island architecture.
- i18n-ready — locale-aware content schemas, with full internationalization available via the companion CLI.
- Developer workflow — Vitest for unit tests, Playwright for E2E, plus ESLint, Prettier, and an Astro type checker.
Who is it for?
- Frontend developers who want a typed, accessible Astro foundation with Tailwind v4 and need SEO, content collections, and theming preconfigured.
- Indie hackers and content creators launching a blog or marketing site with type-safe content, newsletter/contact endpoints, and generated Open Graph images.
- Agencies that need a modular, themable starting point for client sites with dark-mode support and i18n capability.
What can you do with Velocity?
- Build a blog — use ArticleHero, BlogCard, ShareButtons, and RelatedPosts with Zod-validated content collections for posts and authors.
- Create a landing page — combine Credibility, TechStack, and FeatureTabs sections using the design tokens and theme switcher.
- Add a contact or newsletter form — plug the included API routes into your backend and reuse the ContactForm pattern component.
- Localize your site — start with locale-aware schemas and extend to full i18n using the create-velocity-astro CLI.
How does Velocity work?
Velocity works as a standard Astro project: clone the repository or run pnpm create velocity-astro my-project, install dependencies with pnpm (Node 22.12 or later required), copy .env.example to .env, and start the dev server with pnpm dev. Site-wide configuration lives in src/config/site.config.ts, while design tokens and themes are under src/styles.
FAQ
Is Velocity free?
Yes. Velocity is open source and free forever under the MIT license, and you can view the repository on GitHub.
What Node version does Velocity require?
Velocity requires Node 22.12 or later. The recommended package manager is pnpm, and the provided commands (dev, build, preview, lint, test) all assume pnpm.
Does Velocity include a CMS?
No. Velocity uses Astro content collections with Zod validation for blog posts, pages, authors, and FAQs; it does not require a headless CMS. You can connect your own backend to the included API routes.
Can I use Velocity without React?
Yes. React islands are optional in Velocity. You can keep components as plain Astro or Web Components and add React only for specific interactive parts if needed.
Velocity comes configured with Vitest for unit tests and Playwright for end-to-end tests, along with ESLint and Prettier for code quality.
