Theming

Components read CSS variables. Change tokens for system-wide look, or override a single component with classes and selectors.

Where tokens live

Package installs use @sivir/ui/ui.css. CLI installs use src/lib/sivir/ui.css. Both define the same public axes: color, type, radius, and motion.

Override tokens

Set values in your app CSS after importing Sivir’s sheet. Light defaults go in @theme. Dark values go under .dark.

@theme {
  --color-primary: #155eef;
  --color-background: #fcfcfd;
  --color-foreground: #101828;
  --radius-lg: 0.55rem;
  --font-sans: 'Inter', sans-serif;
}

.dark {
  --color-background: #0d1118;
  --color-foreground: #f5f7fb;
  --color-primary: #7aa2ff;
}

Useful public tokens

Color: --color-background, --color-foreground, --color-primary, --color-border, --color-ring
Type: --font-sans, --font-header, --font-mono
Radius: --radius-md, --radius-lg, --radius-xl
Motion: --motion-duration-hover, --motion-duration-panel

Built-in presets

With the CLI, install a built-in preset into theme.css:

bunx --package @sivir/ui sivir add theme default

Import it after ui.css so it wins:

@import './lib/sivir/ui.css';
@import './lib/sivir/theme.css';

sivir list shows available built-in theme slugs. Community theme registry hosting is not part of v1.

Dark mode

Toggle a .dark class on <html>. Components do not manage the class for you.

class prop

Every primitive accepts class. Use Tailwind utilities or your own classes for one-off tweaks.

<Button class="w-full rounded-2xl">Continue</Button>

data-ui selectors

Components render data-ui (and often data-variant / data-size). Scope CSS to a family without forking files.

[data-ui='button'][data-variant='primary'] {
  border-radius: 999px;
}

[data-ui='badge'][data-variant='secondary'] {
  text-transform: uppercase;
}

Edit the source

With the CLI path, files live under src/lib/sivir/components/<name>/. Edit them when you need behavior changes, not just style.

# after: bunx --package @sivir/ui sivir add button
src/lib/sivir/components/button/
├── button.svelte
└── index.ts

Components