shadcn registry

Each saved design system has its own shadcn registry, so npx shadcn add installs components already in your colors.

Your system’s registry

Every saved design system has its own registry at https://useuix.com/r/<id>/. It holds the uix-ui components, linked to your system’s theme.

Address	What it is
`/r/<id>/registry.json`	The full registry: your theme and every component you can add
`/r/<id>/theme.json`	Your theme. It writes `styles/uix.css` and adds its import to your CSS file.
`/r/<id>/<name>.json`	One component, for example `button.json`

Add the theme and components

Add the theme
Run this in your project folder. It puts your colors, fonts, spacing, radius and shadows in src/styles/uix.css.
Terminal
```
npx shadcn@latest add https://useuix.com/r/<id>/theme.json
```
Add components
Every component depends on utils, and utils brings the theme along. So the first component you add also adds the theme, and step 1 is optional.
Terminal
```
npx shadcn@latest add https://useuix.com/r/<id>/button.json
```

Use them

Import them like any shadcn component.

src/App.tsx

import { Button } from "@/components/ui/button";

export default function App() {
  return <Button>Save</Button>;
}

The shadcn CLI needs the @/* import alias in tsconfig.json. Next.js has it; in Vite, add it yourself. The uix-ui CLI doesn’t need it: it rewrites the imports as relative paths.

Short names after uix-ui pull

If you ran npx uix-ui pull <id>, your components.json already lists your system as the @uix registry. Then shadcn takes short names:

Terminal

npx shadcn@latest add @uix/button

uix-ui themes

Not using a saved system? The open-source uix-ui library has its own registry at /ui/r, with the UIX default theme and its preset themes. It works without any setup:

Terminal

npx shadcn@latest add https://useuix.com/ui/r/button.json

What your plan changes

The registry follows the plan of the system’s owner. Free owners get the free components with light and dark colors. UIX Pro owners also get the Pro items, such as the marketing blocks. Check what you can add with npx uix-ui list.