Installation

How to install and use Saastro blocks in your project.

Installation

Saastro Blocks uses the shadcn CLI for installation. If you already have shadcn/ui set up in your project, you just need to add the Saastro registry.

Prerequisites

1. Initialize shadcn/ui

If you haven’t already, initialize shadcn/ui in your Astro project:

npx shadcn@latest init

This creates a components.json file and sets up your project structure.

2. Add the Saastro registry

Open your components.json and add the Saastro registry:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@saastro": "https://ui.saastro.io/r/{name}.json"
  }
}

3. Install blocks

Now you can install any block:

# Install a single block
npx shadcn@latest add @saastro/hero-01

# Install multiple blocks
npx shadcn@latest add @saastro/hero-01 @saastro/features-01 @saastro/pricing-01

The CLI will automatically install the block source code and the @saastro/* primitives that block declares (12 of the 15 declare none).

4. Use blocks in your pages

Import the block component and pass your content as props:

---
// src/pages/index.astro
import Hero01 from '@/components/blocks/hero-01.astro';
---

<Hero01
  badge="Just launched"
  title="Build your landing page in minutes"
  description="Beautiful, responsive blocks for Astro."
  primaryCta={{ label: 'Get Started', href: '/docs' }}
  secondaryCta={{ label: 'View Demo', href: '/demo' }}
/>

12 of the 15 blocks are .astro: no React involved, nothing shipped to the browser. Only faq-01, navbar-01 and pricing-01 are React islands — those need a client directive to become interactive:

<Pricing01 client:visible plans={[...]} />

Available blocks

Browse all blocks in the blocks gallery.

Next steps