uix-uiInstallation
Create an app, run init, add the components you want. It takes about a minute.
Requirements
- React 18 or 19.
- Tailwind CSS v4. The CLI stops if it finds v3.
- Node 18 or newer to run the CLI. It has no dependencies of its own.
Create your app
Pick your framework. If you already have an app, you can skip this step.
Say yes to Tailwind CSS when it asks.
$ npx create-next-app@latest my-appSet up the theme
Run init in your app folder. Choose a theme with --preset; browse them on the themes page. Leave the flag out for the UIX default.
$ npx uix-ui@latest init --preset lagoon-stretch wrote components.json
wrote src/styles/uix.css
fonts Sora, Plus Jakarta Sans, JetBrains Mono → index.html
updated src/index.css
wrote src/lib/utils.ts
Done. Next: npx uix-ui add button card input
Dark mode: <html data-theme="dark">. Other presets: npx uix-ui theme <preset>.What init writes
| Where | What | Good to know |
|---|---|---|
components.json | Adds the @uix and @uix-pro registries. A new file also gets the usual shadcn-style aliases. | An existing file is kept; only the registries are added. |
src/styles/uix.css | The theme: colours in light and dark, type scale, spacing, radius, shadows. | Rewritten by init and by theme. Put your own changes in your own CSS. |
| Your main CSS file | An @import of the theme, right after @import "tailwindcss". | The first of src/index.css, src/app/globals.css, app/globals.css, src/styles/globals.css, src/main.css that exists. If none does, src/index.css is created. |
src/lib/utils.ts | The cn() helper. | Not overwritten if it already exists. |
index.html | Google Fonts links for the theme, between <!-- uix-fonts --> markers. | Only when an index.html exists (Vite). Other setups get the links printed. |
| Dependencies | clsx and tailwind-merge, if missing. | Installed with the package manager your lockfile points to. Pass --no-install to only print the command. |
If your project has a src folder, files go in it. Otherwise they go in the project root.
Add components
Name the components you need. Anything they depend on comes along, and missing packages are installed for you.
$ npx uix-ui@latest add button badge wrote src/components/ui/button.tsx
wrote src/components/ui/icons.tsx
wrote src/components/ui/badge.tsx
npm install class-variance-authorityComponents import each other with relative paths, so you do not need an @/ alias in your tsconfig. Add --overwrite to replace files that already exist.
Use a component
Import it from the folder it was copied to and use it like any other React component.
import { Badge } from "./components/ui/badge";
import { Button } from "./components/ui/button";
export default function App() {
return (
<>
<Button>Save</Button>
<Button variant="outline">Cancel</Button>
<Badge color="success">Paid</Badge>
</>
);
}"use client", so they work in Next.js with Server Components.If a command stops
| Message | Why | Fix |
|---|---|---|
no components.json here | You ran add or theme before init. | Run uix-ui init first. |
UIX themes need Tailwind CSS v4 (found v3) | Your package.json lists Tailwind CSS 3. | Upgrade to Tailwind CSS v4, then run init again. |
run this in your app folder | There is no package.json in the current folder. | cd into your app and run the command again. |
Next: theming, or the full list of commands.