Matcha UI
React · Tailwind v4 · Radix UI

The design system for modern SaaS products

Matcha UI gives you accessible, responsive building blocks—live docs, copy-paste snippets, and OKLCH tokens so your product stays cohesive from marketing site to app shell.

Explore componentsDesign tokensInstallation

Everything you need to move fast

Opinionated defaults with room to customize—no black-box runtime.

Composable primitives
Radix-powered accessibility with Tailwind v4 tokens—copy the source, own the styling.
Shipped for SaaS
Sidebars, data tables, charts, and onboarding patterns out of the box.
Themeable OKLCH
Semantic colors, spacing, radius, and type scale in one import.

Components that feel finished

Buttons, cards, inputs, badges, and more—wired to your theme tokens.

View all
Default
Secondary
Outline
Alert
Dashboard preview
KPI cards and charts use the same tokens as your marketing pages.

MRR

$48k

+12%

Users

1.2k

Churn

2.1%

OKLCH color tokens

Semantic palettes for light and dark—success, warning, and info included.

Full token reference

Primary

Secondary

Accent

Muted

Success

Warning

Info

Destructive

Icons that scale with your stack

Docs use Phosphor — components pair with Lucide wherever you need crisp strokes.

Layout
Analytics
Teams
Components
Tokens
DX
Browse Phosphor in the docs
Install in minutes

Drop into Next.js or Vite

Add the package, import Matcha styles once, and start using components. Transpile the package in Next.js for the best DX.

  • ✓ Tailwind v4 + @theme tokens
  • ✓ shadcn-style copy & paste
  • ✓ React 18 / 19
npm install matcha-ui

// app/globals.css
@import "tailwindcss";
@import "matcha-ui/styles";

Ready to build?

Start with the docs, copy a component, and ship your next feature today.

Open documentationSetup guide