uix-uiIntroduction
uix-ui is a set of React components and Tailwind CSS v4 themes that you copy into your project and own.
What is uix-ui
uix-ui is a set of open-source React components and Tailwind CSS v4 themes. You run one command and the files land in your project, so the code is yours. It is MIT licensed.
There are 64 components and 42 themes: the UIX default and 41 free presets. Each theme comes with light and dark colours. The components are made by the same generator as the UIX Figma plugin.
In three commands
Set up a theme, add the components you want, and switch themes whenever you like.
npx uix-ui init --preset beetroot-harrow # theme, cn() helper, components.json
npx uix-ui add button card input badge alert
npx uix-ui theme lagoon-stretch # switch to another free themeThe installation guide walks through it for Next.js, Vite, Astro and existing apps.
Principles
How it relates to UIX for Figma
UIX for Figma is a separate sister product. It builds the same design system inside Figma, with the same names for components, variants and sizes. A Figma Button / Primary / md is a <Button variant="primary" size="md"> in code.
You do not need Figma to use uix-ui. Read more in the Figma guide.
Questions
Is uix-ui really free?
Yes. The components, the CLI, the Tailwind themes and the 41 free presets are MIT licensed. Use them in personal and commercial projects without asking.
What does UIX Pro add?
Marketing blocks, nine visual styles and all 251 themes, installed with the same CLI and your licence key. Page templates come with the Figma plugin.
How is it different from shadcn/ui?
Same idea: you copy components into your app and own them. uix-ui adds full design-system themes (ramps, type, spacing, radius, light and dark), a Figma library that matches the code, and an MCP server for AI agents. It also uses the same registry format, so the shadcn CLI can install uix-ui items.
Do I need Radix or another UI library?
No. Components use native HTML: dialog, the popover attribute and details. The only dependencies are class-variance-authority, clsx and tailwind-merge.
Which frameworks work?
Any React 18 or 19 app with Tailwind CSS v4: Vite, Next.js (App or Pages router), Remix, Astro with React. Server Components are fine; interactive components are marked "use client".
How does dark mode work?
Every theme ships light and dark tokens. Set data-theme="dark" on the html element and everything follows, including the animations.
Can I use my own brand instead of a preset?
Yes. Make your system in the UIX Figma plugin, then install it as your own theme. With Pro, your components follow your own sizes, shapes and styles too.
Will the animations hurt accessibility?
They follow the reduced-motion setting: if someone turns motion off, components appear without moving. Focus states and keyboard support work with or without motion.
Anything else? Open an issue on GitHub.