Installation

Install any item from Design System UI with the shadcn CLI. Replace example-card with the item name from the catalog.

Start with styles so your project has the design system CSS foundation before adding components. Then apply your brand accents in Theming.

Configure the registry

Your project must already be set up with shadcn. Then add this registry to components.json so the CLI can resolve @design-system-ui/* items:

{
  "registries": {
    "@design-system-ui": "https://reactdocs.canceydejean.dev/r/{name}.json"
  }
}

Do this once per project. Without it, installs fail with Unknown registry "@design-system-ui".

Install an item

npm

npx shadcn@latest add @design-system-ui/example-card

pnpm

pnpm dlx shadcn@latest add @design-system-ui/example-card

yarn

yarn dlx shadcn@latest add @design-system-ui/example-card

bun

bunx shadcn add "@design-system-ui/example-card"

Browse components, hooks, and blocks for the exact install command on each item page.