Saturation UI

A design system built for production finance tools. Beautiful, accessible components you can copy and paste into your apps.

Installation

npx shadcn@latest add @saturation-ui/button

Features

• 60+ Components — From buttons to data tables to full calendars
• shadcn Registry — Install any component via CLI, no account required
• Tailwind CSS v4 — Built with the latest Tailwind, oklch color space
• Accessible — Every component follows WAI-ARIA patterns
• Dark Mode — Full light and dark mode support
• TypeScript — Fully typed with exported prop types
• MCP Compatible — AI assistants can discover and use components automatically
• AI-readable design system — A canonical DESIGN.md (also at /design.md) in google-labs-code/design.md format. Drop into Claude Code, Cursor, or Anthropic's Claude Design product for brand-correct AI-generated UI.

Getting Started

1. Install a component:

npx shadcn@latest add @saturation-ui/button

2. Use it:

import { Button } from "@saturation-ui/react"

export function MyApp() {
  return <Button variant="default">Click me</Button>
}