# Installation

Install Design System UI items with the shadcn CLI.

Install any item from **Design System UI** with the [shadcn CLI](https://ui.shadcn.com/docs/cli). Replace `example-card` with the item name from the catalog.

Start with [styles](/docs/styles) so your project has the design system CSS foundation before adding components. Then apply your brand accents in [Theming](/docs/theming).

## Configure the registry

Your project must already be set up with [shadcn](https://ui.shadcn.com/docs/installation). Then add this registry to `components.json` so the CLI can resolve `@design-system-ui/*` items:

```json
{
  "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

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

### pnpm

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

### yarn

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

### bun

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

Browse [components](/components), [hooks](/utilities), and [blocks](/blocks) for the exact install command on each item page.