Getting Started

Installation

Get sv5ui up and running in your SvelteKit project in a few minutes.

1

Create a SvelteKit project

If you don't have a SvelteKit project yet, create one first.

Terminal
npx sv create my-app
cd my-app
2

Install sv5ui

Add sv5ui and its peer dependencies to your project.

npm
npm install sv5ui
3

Configure Tailwind CSS

Import the sv5ui theme in your layout.css file. This sets up the OKLCH color system, component styles, and dark mode support.

src/routes/layout.css
@import 'tailwindcss';
@import 'sv5ui/theme.css';

@custom-variant dark (&:where(.dark, .dark *));
4

Set up dark mode

Add ModeWatcher to your root layout for automatic dark mode support.

src/routes/+layout.svelte
<script lang="ts">
  import './layout.css';
  import { ModeWatcher } from 'mode-watcher';

  let { children } = $props();
</script>

<ModeWatcher />
{@render children()}
5

Start using components

Import and use any sv5ui component in your Svelte files.

src/routes/+page.svelte
<script lang="ts">
  import { Button, Card, Badge } from 'sv5ui';
</script>

<Card>
  {#snippet header()}
    <h3>Welcome to SV5UI</h3>
    <Badge label="New" variant="soft" color="success" />
  {/snippet}

  <p>Your first sv5ui component!</p>

  {#snippet footer()}
    <Button variant="solid" color="primary" label="Get Started" />
  {/snippet}
</Card>
Introduction Theming