uix-uiThe component library for your own design system
Accessible React components and Tailwind CSS v4 themes. Copy them into your project, own every line, and change the whole look with one theme file.
npx uix-ui@latest initCreate an account
Start your shop in a minute.
Notifications
LiveWorks with the tools you already use
Find a look that feels like yours
42 themes, each a full design system: colours, type, radius, light and dark. Tap a card and this whole page wears it. Then change the style and shape to see how far one system can go.
npx uix-ui theme uixReal screens, only uix-ui components
Every screen below is built from the components on this site, wearing the theme you picked. Click, type and open things.
Your details
Add the domain ending, like .com
Press Enter after each email
Verify your phone
We sent a 6-digit code to +880 17•• •••• 21. Try 123456.
Plan
Invoice details
Components in this screen: input, combobox, select, tag input, number input, date picker, popover, otp input, segmented, selection card, slider, switch, checkbox, textarea, file upload, button.
Components
64 components. Every tile below is the real thing: click it, type in it, then open its code or copy its install command.
- Calendar⌘C
- Search orders⌘O
- Customers⌘U
- Settings⌘,
- Switch to dark mode
- Wear Lagoon Stretch
October 2026
Account settings
Password settings
Is it free?
Dark mode?
One system, from Figma to your agent
Designers keep working in Figma, agents keep working in your editor, and both use the same names and tokens as your code.
import { Button } from "@/components/ui/button"; <Button variant="primary" size="md" > Save changes </Button>
Same names on both sides. What a designer picks in Figma is the prop a developer writes. Try the properties on the left.
Whole pages, ready to start from
Landing, pricing, settings, sign-in and dashboard pages, plus marketing blocks, all built from the same components and wearing whatever theme you pick.
From an empty folder to your brand
Pick your package manager and framework. Every command updates to match, and you can watch each one run.
- 1
Say yes to Tailwind CSS when it asks.
$npx create-next-app@latest my-shop - 2
Writes components.json, the theme CSS and the cn() helper.
$npx uix-ui@latest init --preset uix - 3
Only the components you pick. Dependencies install for you.
$npx uix-ui@latest add button card switch input - 4
One command changes the whole theme. Components stay as you left them.
$npx uix-ui@latest theme ember-ledger
Start building with your own design system
Free and open source. Copy in what you need today, bring your own brand when you're ready.
npx uix-ui@latest init