StorybookGitHub

Styles

Design system globals and theme CSS for consumer apps.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/styles.json

Usage

Install the design system CSS foundation, then import globals.css in your app entry stylesheet or root layout.

npx shadcn@latest add @design-system-ui/styles
import "@/styles/globals.css";

This writes:

  • src/styles/globals.css
  • src/styles/theme.css
  • src/styles/theme-secondary.css
  • src/styles/theme-tertiary.css

If those paths already exist, the shadcn CLI may prompt before overwriting.

Set data-theme="theme-secondary" or data-theme="theme-tertiary" on <html> to switch accents, or add your own palette file. See Theming.