Styles | design-system-ui

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 and Tailwind CSS.

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

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

Without this, the CLI returns Unknown registry "@design-system-ui". See Installation for the full setup flow.

Install

npm

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

pnpm

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

yarn

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

bun

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:

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 to apply a shipped accent or your own brand colors.

Next steps

Apply your brand accents in Theming, then browse components, hooks, and blocks and follow each item page install command.