Installation

Prerequisites

• Svelte 5 (the CLI defaults assume SvelteKit)
• Tailwind CSS v4

Option A: Package import

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

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

Import the stylesheet once in your root CSS file, in place of @import 'tailwindcss';. It imports Tailwind for you:

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

Use a component:

<script>
  import { Button } from '@sivir-ui/svelte';
</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 sivir binary ships in @sivir-ui/svelte, so these commands run it with bunx @sivir-ui/svelte. It copies component source into your project. These commands need Bun 1.3.14 or later. With npm, use npx @sivir-ui/svelte.

1. Create a project (optional)

bunx sv create my-app

2. Add Tailwind v4

cd my-app && bunx sv add tailwindcss

3. Initialize Sivir

Copies ui.css and shared utilities into src/lib/sivir/, writes sivir.json, and installs the shared dependencies. -y accepts the default directory and import alias and skips the confirmations for installing dependencies and editing your stylesheet.

bunx @sivir-ui/svelte init -y

4. Import the stylesheet

ui.css includes Tailwind, so it replaces @import 'tailwindcss';. init makes this change in the stylesheet sv add tailwindcss creates. Make it yourself if your root stylesheet lives elsewhere:

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

5. Add components

add copies each component with its dependencies and offers to install the npm packages they need. Pass '*', quoted, to add every component.

bunx @sivir-ui/svelte add button
bunx @sivir-ui/svelte 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 applies under a .dark class on <html>. Sivir reads the class but does not toggle it.
• In a CLI project, install a built-in theme preset with bunx @sivir-ui/svelte add theme <slug> (for example raven). It writes theme.css next to ui.css; import it after ui.css.

Next

Theming · Components