Blocks for Astro
Production-ready landing page sections built with shadcn/ui. Install with one command. Customize everything.
npx shadcn@latest add @saastro/hero-01 16 blocks across 10 categories
Hero sections, feature grids, pricing tables, testimonials, and more.
Hero — Centered
Centered hero with badge, heading, description, and dual CTA buttons.
Hero — Split with Image
Split hero with content on the left and image/screenshot on the right.
Hero — Gradient
Hero section with gradient background, floating badge, and a single prominent CTA.
Features — Icon Grid
3-column feature grid with icons, titles, and descriptions in cards.
Features — Alternating
Alternating image and text sections to showcase features.
Pricing — 3 Tiers
Three-tier pricing cards with monthly/annual toggle and feature lists.
CTA — Gradient Banner
Full-width CTA banner with gradient background, heading, and action buttons.
FAQ — Accordion
FAQ section with accordion for expandable questions and answers.
Testimonials — Card Grid
Testimonial grid with avatar, name, role, and quote cards.
Footer — Multi-Column
Multi-column footer with navigation links, social icons, and copyright.
Navbar — Responsive
Responsive navbar with desktop navigation and mobile hamburger menu.
Blog — Post Grid
Responsive grid of blog post cards with image, title, excerpt, and metadata.
Newsletter — Signup
Email newsletter signup section with input and submit button.
Stats — Counter Row
Row of key statistics with large numbers and labels.
Logos — Trusted By
"Trusted by" logo cloud section with grayscale hover effect.
Button Pro
Enhanced button with CVA variants, icon effects, shine, gooey, underline, and gradient animations.
How it works
Configure registry
Add the Saastro registry to your components.json.
Install blocks
Run npx shadcn add @saastro/hero-01 to add any
block.
Customize & ship
Edit the code, change the styles, and deploy your site.
Add to your components.json
{
"registries": {
"@saastro": "https://ui.saastro.io/r/{name}.json"
}
}