One design system. Astro, Svelte, React, Vue, or vanilla.
A themeable, accessible component library and CSS foundation. Scaffold with the CLI, drop in components, or ship with just the styles — no runtime lock-in.
See it in action
Buttons
Theme
Switch themes with the control below or the settings button in the navbar.
Install
CLI
Scaffold a new app (Vanilla, Astro, Svelte, React, or Vue). Select your package manager and copy the command.
Choose your package manager — click a tab to select, then copy the command.
npm 
pnpm 
yarn 
bun npm package
Add the package to your project
Choose your package manager — click a tab to select, then copy the command.
Features
A complete design system that works across Vanilla, Astro, Svelte, React, and Vue — same CSS, same components, zero lock-in.
14 beautiful themes
7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.
Accessibility first
WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.
50 ready components
Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.
And more
Semantic variables
CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.
PostCSS powered
Imports, autoprefixing, and production minification. Fits into any build pipeline.
Typography & spacing
Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).
Responsive & utilities
Mobile-first breakpoints and utility classes for layout, display, and flexbox.
Documentation
Getting Started
Installation, project structure, and quick start guide
Components
Component library with usage examples and live demos
Theming
Theme system, custom themes, and color format guide
Design System
Semantic variables, typography, and design principles
Accessibility
Accessibility guidelines, utilities, and best practices
Colors
Interactive color reference with multiple format options