Installation

Every install starts in the Studio. Build your design system, then hit Export: it gives you the command for your project with your design system in the URL. The commands below install Origin, the default; yours point at your preset (/r/p/<id>/init.json) or at a snapshot of your own design system, exactly as it is when you open Export (/r/s/<id>/init.json).

New project

Scaffolds an app with your design system, then swaps the template's Button for dotUI's.

pnpm dlx shadcn@latest init "https://dotui.org/r/init.json" --template next --name my-app

cd my-app && pnpm dlx shadcn@latest add @dotui/button --overwrite --yes

--template takes next, start (TanStack Start), vite or react-router.

Existing project

Run in your project root. Your project needs React 19, Tailwind CSS 4 and TypeScript 5.

pnpm dlx shadcn@latest init "https://dotui.org/r/init.json" --force --no-reinstall

This registers @dotui in components.json, so every component you add after installs already themed. Your theme tokens, fonts and lib/utils are replaced.

Adding a dotUI component means overwriting your file of the same name, such as button.tsx: other dotUI components rely on dotUI's Button.

Add components

Add any component by name. Each component page lists its own command.

pnpm dlx shadcn@latest add @dotui/button

dotUI and shadcn

• dotUI is distributed through the shadcn CLI and registry format: init, add and components.json work as you know them.
• Components are built on React Aria Components, not Radix (Toast, Drawer and OTP Field use Base UI), styled with Tailwind CSS 4 and tailwind-variants.
• You own the code. Components land in your repo as plain files; edit them freely.