Mainline is a free marketing website template for Astro 5, built with shadcn/ui and Tailwind CSS 4, that provides a full set of pre-built pages and blocks for launching a multi-page SaaS marketing site. It is maintained by shadcnblocks.com, designed by Callum Flack, and developed by Yassine Zaanouni.
What is the Mainline Astro Template?
Mainline is a starter template that gives developers a production-ready Astro 5 project with React 19, TypeScript, MDX support, and a library of shadcn/ui components. As input it takes your content and configuration; as output it generates a static, SEO-ready marketing website with dark/light mode, animations, and responsive layouts. The template is distributed as a free open-source project and is tested for deployment on Vercel.
Key Features
- Astro 5 + React 19 stack — Built with Astro 5 and React 19 with TypeScript support, producing a fast static site.
- shadcn/ui components — Uses shadcn/ui core components, so you can copy and customize the UI primitives directly.
- Tailwind CSS 4 styling — Styling is handled by Tailwind CSS 4, with a theme system that supports dark/light mode via astro-themes.
- tweakcn compatibility — The theme tokens work with tweakcn, a tool for customizing shadcn themes.
- MDX support — Content pages can be authored in MDX within the Astro project.
- Motion (Framer Motion) integration — Animated interactions are powered by the Motion library.
- Pre-built pages and blocks — Includes home, about, pricing, FAQ, contact form, and login/signup pages, plus hero, logo marquee, features, testimonials carousel, pricing table, FAQ accordion, footer, and navigation blocks.
- Development tooling — Ships with Prettier pre-configured, Lucide React and React Icons, and Styleglide support for component previews.
Who is it for?
- SaaS founders and startup teams who need a multi-page marketing website that can be assembled quickly from ready-made sections.
- Astro developers who want a modern starter with shadcn/ui, Tailwind 4, and Motion already integrated.
- Designers and frontend engineers who want to customize the template in Figma and translate the design to code with tweakcn compatibility.
What can you do with the Mainline Astro Template?
- Launch a landing site by combining the hero, features, testimonials, pricing, and FAQ sections into a single-page marketing site.
- Build a multi-page SaaS website using the included home, about, pricing, FAQ, contact, and authentication pages.
- Write content in MDX for blog posts, docs, or any custom page beyond the marketing template.
- Deploy to Vercel with a project that is production-ready and tested on the platform.
How does the Mainline Astro Template work?
Clone or use the repository as a template, install dependencies with npm install, then start the development server with npm run dev. The site runs locally at http://localhost:3000, and the project can be deployed directly to Vercel.
Pricing
Mainline is free to use. The template description and repository do not list any paid tier or license fees.
FAQ
Is Mainline Astro Template free?
Yes, Mainline is released as a free template. No pricing or paid tiers are mentioned on the page.
What tech stack does Mainline use?
Mainline uses Astro 5 as the framework, Tailwind CSS 4 for styling, shadcn/ui for UI components, React 19 for interactive islands, and TypeScript for type safety.
Does Mainline support dark mode?
Yes, the template includes a dark/light theme system implemented with astro-themes and is compatible with tweakcn for theme customization.
Does Mainline include a Figma file?
Yes, a Figma design file is linked from the template page for the Mainline design, so you can work from the same source of truth.
Can I use Mainline with MDX?
Yes, MDX support is included for content pages, allowing you to author pages with embedded JSX or Markdown.
