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/button

Features

• 60+ Components — From buttons to data tables to full calendars
• shadcn Registry — Install via CLI with npx shadcn add @saturation/[component]
• 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

Getting Started

1. Configure your project's components.json:

{
  "registries": {
    "@saturation": "https://ui.saturation.io/r"
  }
}

2. Install a component:

npx shadcn@latest add @saturation/button

3. Use it:

import { Button } from "@/components/ui/button"

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