Registry

Landing blocks for Astro.

15 of 53 blocks ship zero JavaScript and zero dependencies — they install into an Astro project without React. Interactive ones come as React on Base UI.

Browse blocks Read the docs

npx shadcn@latest add @saastro/hero-01

Blocks in the registry

Zero-JS Astro blocks

Copy, paste, and ship.

All 18 blocks →

Hero3 Features3 Pricing1 Landing1 CTA2 FAQ2 Testimonials1 Navigation4 Content1 Social Proof2 Buttons2 Display9 Disclosure1 Overlays7 Forms14

Hero — Centered

Centered hero with badge, heading, description, and dual CTA buttons. Zero-JS Astro component.

Hero

Hero — Split with Image

Split hero with content on the left and image or screenshot on the right. Zero-JS Astro component.

Hero

Hero — Gradient

Hero with gradient background, floating badge, and a single prominent CTA. Zero-JS Astro component.

Hero

Features — Icon Grid

3-column feature grid with icons, titles, and descriptions in cards. Zero-JS Astro component.

Features

Features — Alternating

Alternating image and text sections to showcase features. Zero-JS Astro component.

Features

Steps — Numbered How-It-Works

Numbered steps for a how-it-works section, with optional eyebrow and description. Zero-JS Astro component.

Features

How it works

Three steps, no build step.

Point at the registry

Add @saastro to the registries map in your components.json.

Install a block

The CLI copies the source into your project and pulls any primitive it needs.

Make it yours

It is your code now — edit the markup, swap the tokens, ship it.

COMPONENTS.JSON

{
  "registries": {
    "@saastro": "https://ui.saastro.io/r/{name}.json"
  }
}