Styles

Before components look correct, add the design system style files. This installs globals.css plus the default, secondary, and tertiary theme presets into styles/ at the project root.

Prerequisites

Your project should already be set up with shadcn-svelte and Tailwind CSS. See Installation for the full setup flow.

Install

npm

1npx shadcn-svelte@latest add https://sveltedocs.canceydejean.dev/r/styles.json

pnpm

1pnpm dlx shadcn-svelte@latest add https://sveltedocs.canceydejean.dev/r/styles.json

yarn

1yarn dlx shadcn-svelte@latest add https://sveltedocs.canceydejean.dev/r/styles.json

bun

1bun x shadcn-svelte@latest add https://sveltedocs.canceydejean.dev/r/styles.json

What gets installed

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

The CLI also installs the packages the stylesheet depends on (tailwindcss, tw-animate-css, and @fontsource-variable/inter).

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

Import in your app

Import the globals entry once from your root layout (src/routes/+layout.svelte) or app entry:

1<script>
2  import "../../styles/globals.css";
3</script>

globals.css already imports ./theme.css, ./theme-secondary.css, and ./theme-tertiary.css, so you do not need a second import for the theme tokens.

Theme presets

The published styles are a CSS-first token set for Tailwind v4: a base theme (theme.css) plus two alternate presets. Swap the active preset per-page or per-user by setting data-theme="theme-secondary" (or theme-tertiary) on <html>; omit the attribute for the default palette.

1document.documentElement.dataset.theme = "theme-secondary"; // or "theme-tertiary"

Each preset only overrides --primary, --ring, --sidebar-primary, --selection, and the --chart-* scale — everything else (background, foreground, card, border, radius) is shared, so switching presets only changes the accent, not the whole surface.

Next steps

Browse the components catalog and follow the install command on each item page. The styles item page has the same usage notes as this guide.