Sivir UI
Studio 64

Installation

Install Sivir UI into your project.

Prerequisites

  • Svelte 5 or 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 (for example in src/app.css):

@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 CLI copies source into your project. The package name is @sivir-ui/svelte; 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/svelte sivir init -y

4. Import the stylesheet

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

5. Add components

bunx --package @sivir-ui/svelte sivir add button
bunx --package @sivir-ui/svelte 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/svelte sivir add theme <slug> (for example default).

Next

Theming · Components