Welcome to UnflowUI
The design system powering Unflow's product suite — a collection of accessible, themeable React components built on Tailwind CSS and CVA.
UnflowUI is Unflow's internal design system. It provides a set of React components, design tokens, icons, and utilities that form the visual and interaction language across the product.
What's in the box
| Package | npm name | Description |
|---|---|---|
| UI | @unflow/ui | React component library |
| Tokens | @unflow-ui/tokens | Design tokens as CSS variables |
| Icons | @unflow-ui/icons | 2,000+ SVG icons as React components |
| Utils | @unflow-ui/utils | Shared TypeScript utilities |
Design principles
Composable over configurable. Every component exposes a slotProps API for fine-grained prop injection into internal DOM nodes, and a slots API for full node replacement — without needing to fork the component.
Typed variants, not string props. All visual variants are defined with Class Variance Authority and inferred as TypeScript union types, giving you autocomplete and preventing typos at the call site.
Tailwind for styling, CVA for variants. Components are styled with Tailwind utility classes. The CVA layer maps variant props to class strings, keeping the component logic thin and the styles inspectable.
Browse the docs
- Installation — add the packages to your project
- Tokens — understand the color and token system
- Components — component API reference
- Icons — how to use the icon library
- Utilities — shared TypeScript helpers