TuMarca

Introduction

Shadcn-like DX, Astro-native output. Build fast, accessible sites with composable components.

Introduction

Saastro UI is a collection of beautifully designed, accessible components built for Astro. Same mental model as shadcn/ui—composable components, variants, and a registry-based workflow—optimized for Astro and performance.

Why Saastro UI?

Familiar API for React devs, but built to ship fast Astro pages with minimal client JS.

If you’ve used shadcn/ui, you’ll feel right at home. We keep the same developer experience you love:

  • Composable components (Card, CardHeader, CardContent…)
  • Consistent API (props, variants, slots)
  • Accessibility resolved (keyboard, ARIA, focus states)
  • Style variants (intent, size, state)
  • Selective installation (add only what you use)
  • Predictable file structure (components + utilities + tokens)
  • Local customization (each project can adjust without fighting a rigid core)

The difference? The output is Astro-native, not React.

What’s Different vs shadcn/ui

Aspectshadcn/uiSaastro UI
FrameworkReactAstro (.astro components)
JavaScriptAlways ships ~150-200KBZero JS by default
HydrationFull page hydrationIslands only when needed
PerformanceGoodExceptional (90+ Lighthouse)
Use caseReact appsLanding pages, marketing sites, docs

Same DX, Different Engine

# Both work the same way
npx shadcn add button    # React
npx saastro add button   # Astro

You get the same workflow. The components look identical. But Saastro ships less JavaScript and loads faster.

When to Use Saastro UI

Perfect for:

  • Landing pages and marketing sites
  • Documentation sites
  • Blogs and content-heavy sites
  • Any Astro project that needs beautiful UI

Consider shadcn/ui if:

  • You’re building a React SPA
  • You need React-specific features (hooks, context across components)
  • Your team is React-only

Philosophy

Saastro UI follows the same principles as shadcn/ui:

  1. Copy and paste — Components live in your project, not in node_modules
  2. You own the code — Customize anything without fighting upstream
  3. Accessible by default — WCAG compliant, keyboard navigable
  4. Open source — MIT licensed, use it however you want

How It Works

  1. Initialize your project with the CLI
  2. Add components you need (they copy into your project)
  3. Customize tokens, variants, and styles
  4. Compose pages and sections
  5. Ship fast, accessible sites
# Quick start
npx saastro init
npx saastro add button card badge

Ready to Start?

Head to the Installation guide to set up Saastro UI in your project.

Or browse the Components to see what’s available.