Introduction

Production-ready landing page blocks for Astro, built on Base UI.

Introduction

Saastro Blocks is a collection of production-ready landing page sections built with shadcn/ui. Install blocks via the shadcn CLI and customize everything.

What are blocks?

Blocks are complete, self-contained landing page sections — hero sections, feature grids, pricing tables, testimonials, and more. 12 of the 15 blocks are pure .astro; the other 3 are React islands using the @saastro/* primitives.

In Astro, blocks render as pure HTML on the server by default. No JavaScript is shipped unless you explicitly add a client:* directive for interactivity.

How it works

  1. Add the Saastro registry to your components.json
  2. Install blocks with npx shadcn@latest add @saastro/hero-01
  3. Use in your pages — import the component and pass props
  4. Customize — edit the code, change styles, make it yours
# Install any block
npx shadcn@latest add @saastro/hero-01

Why blocks instead of components?

Individual UI primitives (Button, Card, Badge) live in this same registry — 26 of them, on Base UI. What takes time is composing them into complete page sections with proper layout, spacing, and responsive behavior.

Saastro Blocks gives you that higher-level layer — ready-made sections you can drop into any landing page.

Key features

  • shadcn CLI compatible — install with one command, no extra tooling
  • Zero JS by default — server-rendered in Astro, no client bundle
  • Fully typed — TypeScript props for every block
  • Responsive — mobile-first Tailwind CSS
  • Accessible — built on Base UI primitives
  • Customizable — you own the code, edit anything

Ready to start?

Head to the Installation guide to set up the registry.

Or browse the blocks to see what’s available.