--- name: "@saastro" slug: "saastro" description: "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." category: "Forms" tags: ["auth", "blocks", "buttons", "cards", "cms", "forms", "icons", "loaders", "marketing", "media", "navigation", "overlays", "tables"] framework: "react" license: null author: null website: "https://ui.saastro.io" github: null registry: "https://ui.saastro.io/r/registry.json" pro: false pro_url: null github_stars: null component_count: 53 generated_at: "2026-09-21T01:50:16.753Z" --- # @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. ## Links - Website: https://ui.saastro.io - Registry JSON: https://ui.saastro.io/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/saastro - This file: https://sh4dcn.vercel.app/md/saastro.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://ui.saastro.io/r/registry.json pnpm dlx shadcn@latest add https://ui.saastro.io/r/registry.json bunx shadcn@latest add https://ui.saastro.io/r/registry.json # fetch the raw registry index curl -s https://ui.saastro.io/r/registry.json ``` ## Components (53) | name | type | description | install | | --- | --- | --- | --- | | hero-01 | registry: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-02 | registry: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-03 | registry: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-01 | registry: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-02 | registry: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-01 | registry: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-01 | registry: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-01 | registry: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-01 | registry: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-01 | registry:block | FAQ section with accordion for expandable questions and answers. | `npx shadcn@latest add https://ui.saastro.io/r/faq-01.json` | | faq-02 | registry:block | FAQ con `
` 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-01 | registry: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-01 | registry: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-01 | registry:block | Responsive navbar with desktop navigation and mobile hamburger menu. | `npx shadcn@latest add https://ui.saastro.io/r/navbar-01.json` | | blog-grid-01 | registry: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-01 | registry: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-01 | registry: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-01 | registry: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 | registry: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 | registry: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 | registry:ui | Etiqueta compacta con variantes CVA. | `npx shadcn@latest add https://ui.saastro.io/r/badge.json` | | separator | registry:ui | Separador horizontal o vertical, accesible. | `npx shadcn@latest add https://ui.saastro.io/r/separator.json` | | card | registry: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 | registry: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 | registry:ui | Panel lateral (drawer) sobre Base UI Dialog, con los cuatro lados. | `npx shadcn@latest add https://ui.saastro.io/r/sheet.json` | | input | registry: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 | registry:ui | Etiqueta de campo. La necesita `field`, y es markup puro. | `npx shadcn@latest add https://ui.saastro.io/r/label.json` | | textarea | registry:ui | Área de texto multilínea. | `npx shadcn@latest add https://ui.saastro.io/r/textarea.json` | | select | registry: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 | registry:ui | Casilla sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/checkbox.json` | | radio-group | registry:ui | Grupo de opciones excluyentes sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/radio-group.json` | | switch | registry:ui | Interruptor sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/switch.json` | | field | registry: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 | registry:ui | Puente entre react-hook-form y los primitivos. FormField/FormControl. | `npx shadcn@latest add https://ui.saastro.io/r/form.json` | | dialog | registry:ui | Modal sobre Base UI, con backdrop y cierre accesible. | `npx shadcn@latest add https://ui.saastro.io/r/dialog.json` | | popover | registry:ui | Panel flotante anclado sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/popover.json` | | tooltip | registry:ui | Ayuda contextual sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/tooltip.json` | | scroll-area | registry:ui | Área con scroll y barra propia. | `npx shadcn@latest add https://ui.saastro.io/r/scroll-area.json` | | navigation-menu | registry:ui | Menú de navegación con submenús, sobre Base UI. | `npx shadcn@latest add https://ui.saastro.io/r/navigation-menu.json` | | slider | registry: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 | registry:ui | `