Styles
The design system's Tailwind CSS v4 entry point and semantic color/theme tokens for light and dark mode.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/styles.jsonUsage
Import the entry point once from your app's CSS/JS entry:
import "@/styles/globals.css";
globals.css already imports theme.css, theme-secondary.css, and theme-tertiary.css, so you
don't need to import those separately.
theme-secondary.css and theme-tertiary.css are optional accent palettes scoped to
[data-theme="theme-secondary"] / [data-theme="theme-tertiary"]. Set that attribute on <html>
(or any ancestor) to opt an element into the accent — see Theming for how this docs
site's own accent-color switcher does it.
See Styles for the full setup guide, and Theming for how light/dark mode switching works with these tokens.