@saastro

Landing page blocks for Astro. Zero-JS .astro blocks with no dependencies — installable in an Astro project without React — plus interactive React blocks on Base UI.

53 components react shadcn-cli

website ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.saastro.io/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.saastro.io/r/registry.json

bun bunx shadcn@latest add https://ui.saastro.io/r/registry.json

fetch registry curl -s https://ui.saastro.io/r/registry.json

Components

53 total

Hero — Centered block

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

npx shadcn@latest add https://ui.saastro.io/r/hero-01.json

Hero — Split with Image block

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

npx shadcn@latest add https://ui.saastro.io/r/hero-02.json

Hero — Gradient block

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

npx shadcn@latest add https://ui.saastro.io/r/hero-03.json

Features — Icon Grid block

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

npx shadcn@latest add https://ui.saastro.io/r/features-01.json

Features — Alternating block

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

npx shadcn@latest add https://ui.saastro.io/r/features-02.json

Steps — Numbered How-It-Works block

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

npx shadcn@latest add https://ui.saastro.io/r/steps-01.json

Pricing — 3 Tiers block

Three-tier pricing cards with monthly/annual toggle and feature lists.

npx shadcn@latest add https://ui.saastro.io/r/pricing-01.json

Compare — Two-column table block

Two-column comparison of paired statements, with column labels and check/cross marks. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/compare-01.json

CTA — Gradient Banner block

Full-width CTA banner with gradient background, heading, and action buttons. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/cta-01.json

FAQ — Accordion block

FAQ section with accordion for expandable questions and answers.

npx shadcn@latest add https://ui.saastro.io/r/faq-01.json

FAQ — sin JavaScript block

FAQ con `<details>` nativo: cero JS, respuestas dentro del HTML servido e indexables. El hermano sin hidratar de faq-01.

npx shadcn@latest add https://ui.saastro.io/r/faq-02.json

Testimonials — Card Grid block

Testimonial grid with avatar, name, role, and quote cards. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/testimonials-01.json

Footer — Multi-Column block

Multi-column footer with navigation links, social icons, and copyright. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/footer-01.json

Navbar — Responsive block

Responsive navbar with desktop navigation and mobile hamburger menu.

npx shadcn@latest add https://ui.saastro.io/r/navbar-01.json

Blog — Post Grid block

Responsive grid of blog post cards with image, title, excerpt, and metadata. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/blog-grid-01.json

Newsletter — Signup block

Email newsletter signup section with input and submit button. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/newsletter-01.json

Stats — Counter Row block

Row of key statistics with large numbers and labels. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/stats-01.json

Logos — Trusted By block

"Trusted by" logo cloud section with grayscale hover effect. Zero-JS Astro component.

npx shadcn@latest add https://ui.saastro.io/r/logos-01.json

Button Pro ui

Enhanced button with CVA variants, icon effects, shine, gooey, underline, and gradient animations.

npx shadcn@latest add https://ui.saastro.io/r/button-pro.json

Button ui

El botón base sobre Base UI. Variantes CVA (variant, size) y `render` en vez de `asChild`.

npx shadcn@latest add https://ui.saastro.io/r/button.json

Badge ui

Etiqueta compacta con variantes CVA.

npx shadcn@latest add https://ui.saastro.io/r/badge.json

Separator ui

Separador horizontal o vertical, accesible.

npx shadcn@latest add https://ui.saastro.io/r/separator.json

Card ui

Tarjeta y sus partes (header, title, description, content, footer). Markup puro, sin dependencias.

npx shadcn@latest add https://ui.saastro.io/r/card.json

Accordion ui

Acordeón sobre Base UI, con animación de altura por CSS.

npx shadcn@latest add https://ui.saastro.io/r/accordion.json

Sheet ui

Panel lateral (drawer) sobre Base UI Dialog, con los cuatro lados.

npx shadcn@latest add https://ui.saastro.io/r/sheet.json

Input ui

Campo de texto sobre Base UI, con los estados de foco e invalidez del sistema.

npx shadcn@latest add https://ui.saastro.io/r/input.json

Label ui

Etiqueta de campo. La necesita `field`, y es markup puro.

npx shadcn@latest add https://ui.saastro.io/r/label.json

Textarea ui

Área de texto multilínea.

npx shadcn@latest add https://ui.saastro.io/r/textarea.json

Select ui

Desplegable sobre Base UI. Pasa `items` al Root: sin eso el trigger pinta el value crudo en vez de la etiqueta.

npx shadcn@latest add https://ui.saastro.io/r/select.json

Checkbox ui

Casilla sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/checkbox.json

Radio Group ui

Grupo de opciones excluyentes sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/radio-group.json

Switch ui

Interruptor sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/switch.json

Field ui

Envoltorio de campo: label, descripción y error. Es lo que consume @saastro/forms.

npx shadcn@latest add https://ui.saastro.io/r/field.json

Form ui

Puente entre react-hook-form y los primitivos. FormField/FormControl.

npx shadcn@latest add https://ui.saastro.io/r/form.json

Dialog ui

Modal sobre Base UI, con backdrop y cierre accesible.

npx shadcn@latest add https://ui.saastro.io/r/dialog.json

Popover ui

Panel flotante anclado sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/popover.json

Tooltip ui

Ayuda contextual sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/tooltip.json

Scroll Area ui

Área con scroll y barra propia.

npx shadcn@latest add https://ui.saastro.io/r/scroll-area.json

Navigation Menu ui

Menú de navegación con submenús, sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/navigation-menu.json

Slider ui

Control de rango sobre Base UI. Con un thumb emite NÚMERO PLANO, no array.

npx shadcn@latest add https://ui.saastro.io/r/slider.json

Native Select ui

`<select>` nativo estilado. La opción sin JS cuando no hace falta un desplegable rico.

npx shadcn@latest add https://ui.saastro.io/r/native-select.json

Input Group ui

Input con addons (prefijo, sufijo, botón).

npx shadcn@latest add https://ui.saastro.io/r/input-group.json

Input OTP ui

Campo de código de un solo uso.

npx shadcn@latest add https://ui.saastro.io/r/input-otp.json

Calendar ui

Calendario sobre react-day-picker, con la navegación y los estilos del sistema.

npx shadcn@latest add https://ui.saastro.io/r/calendar.json

Avatar ui

Imagen de persona con iniciales de reserva, sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/avatar.json

Skeleton ui

El hueco de lo que está cargando, con la forma que va a tener.

npx shadcn@latest add https://ui.saastro.io/r/skeleton.json

Progress ui

Barra de avance sobre Base UI. `value={null}` es indeterminado.

npx shadcn@latest add https://ui.saastro.io/r/progress.json

Alert ui

El aviso que ya está en la página, no el que interrumpe.

npx shadcn@latest add https://ui.saastro.io/r/alert.json

Table ui

Tabla nativa con su propio scroll horizontal.

npx shadcn@latest add https://ui.saastro.io/r/table.json

Tabs ui

Pestañas sobre Base UI, con indicador deslizante.

npx shadcn@latest add https://ui.saastro.io/r/tabs.json

Dropdown Menu ui

Menú desplegable sobre Base UI: items, checkbox, radio y submenús.

npx shadcn@latest add https://ui.saastro.io/r/dropdown-menu.json

Context Menu ui

El menú del botón derecho, sobre Base UI.

npx shadcn@latest add https://ui.saastro.io/r/context-menu.json

Alert Dialog ui

El diálogo que exige respuesta: no se cierra con Escape ni pinchando fuera.

npx shadcn@latest add https://ui.saastro.io/r/alert-dialog.json