# Styles

Install the design system CSS foundation with the shadcn CLI.

Before components look correct, add the design system style files. This installs `globals.css` and the theme CSS files into `src/styles/`.

## Prerequisites

Your project should already be set up with [shadcn](https://ui.shadcn.com/docs/installation) and Tailwind CSS.

Add the Design System UI registry to `components.json` (once per project):

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

Without this, the CLI returns `Unknown registry "@design-system-ui"`. See [Installation](/docs/installation) for the full setup flow.

## Install

### npm

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

### pnpm

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

### yarn

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

### bun

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

## What gets installed

| File                   | Destination                       |
| ---------------------- | --------------------------------- |
| `globals.css`          | `src/styles/globals.css`          |
| `theme.css`            | `src/styles/theme.css`            |
| `theme-secondary.css`  | `src/styles/theme-secondary.css`  |
| `theme-tertiary.css`   | `src/styles/theme-tertiary.css`   |

The CLI also installs related packages used by the stylesheet (`tw-animate-css`, Geist font packages, and `@tailwindcss/typography`).

If those paths already exist, the CLI may ask before overwriting them.

## Import in your app

Import the globals entry once in your root layout or main stylesheet:

```tsx
import "@/styles/globals.css";
```

`globals.css` already imports `./theme.css`, `./theme-secondary.css`, and `./theme-tertiary.css`, so you do not need extra imports for the theme tokens. See [Theming](/docs/theming) to apply a shipped accent or your own brand colors.

## Next steps

Apply your brand accents in [Theming](/docs/theming), then browse [components](/components), [hooks](/utilities), and [blocks](/blocks) and follow each item page install command.