Installation

Pick one path: install the package, or copy component source with the CLI.

Prerequisites

  • Svelte 5 or SvelteKit
  • Tailwind CSS v4

Option A — Package import

Install the library and import components from @sivir/ui.

bun add @sivir/ui
# npm i @sivir/ui
# pnpm add @sivir/ui

Import the stylesheet once (for example in src/app.css):

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

Use a component:

<script>
  import { Button } from '@sivir/ui';
</script>

<Button>Get started</Button>

Compound components use a namespace export (for example Modal with Modal.Root, Modal.Content, …).

Option B — CLI source copy

The CLI copies source into your project. The package name is @sivir/ui; the binary is sivir.

1. Create a project (optional)

bunx sv create my-app

2. Add Tailwind v4

cd my-app && bunx sv add tailwindcss

3. Initialize Sivir

Creates src/lib/sivir/ (tokens + utilities) and sivir.json.

bunx --package @sivir/ui sivir init -y

4. Import the stylesheet

/* src/app.css */
@import './lib/sivir/ui.css';

5. Add components

bunx --package @sivir/ui sivir add button
bunx --package @sivir/ui sivir list

6. Use them

<script>
  import { Button } from '$lib/sivir/components/button';
</script>

<Button>Get started</Button>

Notes

  • Tailwind v3 is not supported. Sivir needs v4 @theme and color-mix.
  • Dark mode uses a .dark class on <html>.
  • Built-in theme presets install with bunx --package @sivir/ui sivir add theme <slug> (for example default).

Next

Theming · Components