uix-uiCLI
Four commands: init, add, theme and list. Here is what each one does and prints.
Overview
The CLI is called uix-ui. It has no dependencies and needs Node 18 or newer. Run it with your package manager's runner; the tabs below show each one.
npx uix-ui init [--preset <id>] [--registry <url|folder>] set up the theme, utils and components.json
npx uix-ui add <component...> copy components into your app
npx uix-ui theme <preset> switch to another UIX preset (uix = default)
npx uix-ui list components and themes in the registryEvery command except init reads components.json, so run init first.
init
Sets up a project. It writes components.json and the theme CSS, imports the theme in your main CSS file, adds the cn() helper and loads the theme's fonts. Run it in the folder that holds your package.json.
$ 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>.It warns if Tailwind CSS is not installed yet, and stops if it finds Tailwind CSS v3. The installation guide lists every file it touches.
add
Copies components into your app, with everything they depend on. Missing packages are installed with the package manager your lockfile points to (npm, pnpm, yarn or bun). Input needs the icons file, so it comes along.
$ npx uix-ui@latest add button card input wrote src/components/ui/button.tsx
wrote src/components/ui/card.tsx
wrote src/components/ui/icons.tsx
wrote src/components/ui/input.tsx
npm install class-variance-authorityNames
A plain name such as button comes from the @uix registry. You can also write it out: @uix/button. Pro items use @uix-pro/<name>.
theme
Switches the project to another preset. It rewrites src/styles/uix.css and updates the font links. Components are not touched. Use uix for the default.
$ npx uix-ui@latest theme beetroot-harrow wrote src/styles/uix.css
fonts Familjen Grotesk, Rubik, JetBrains Mono → index.htmllist
Prints every component and every theme in the registry, each with a count.
$ npx uix-ui@latest listFlags
| Flag | Used by | What it does |
|---|---|---|
--preset <id> | init | The theme to set up. Leave it out for the UIX default. theme also accepts it in place of the name. |
--registry <url|folder> | init | Where components and themes come from: a URL or a local folder. The default is https://uixdesign.pagestro.com/ui/r. |
--overwrite | add | Replace files that already exist. Without it, a changed file is skipped and the CLI says so. |
--no-install | init, add | Do not run the package manager. Print the install command instead. |
--help | any | Print the command list. help and -h do the same, and so does running the CLI with no command. |
Pro items
UIX_LICENSE to your key, then add Pro items by name, the same as free ones: the marketing blocks (hero, pricing-card, testimonial…), the visual styles (skins) and the 210 Pro themes (npx uix-ui theme acid-prompt). list shows them all. Get a key on the pricing page.The shadcn CLI
The registry uses the shadcn format, and init adds it to components.json. So the shadcn CLI can install uix-ui items too.
$ npx shadcn@latest add @uix/buttonMessages
Errors start with uix-ui: and the CLI exits with code 1. These are the ones you are most likely to see.
| Message | What to do |
|---|---|
no components.json here | Run uix-ui init first. |
name at least one component | add needs a name, for example uix-ui add button. |
is a UIX Pro item | The registry answered 401 or 403. Set UIX_LICENSE to your key. |
is not in the registry | The name does not exist, or the folder you passed does not have it. |
unknown command | The CLI prints the command list after this message. |