Getting Started

Installation

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

Prerequisites

SV5UI requires Svelte 5, Tailwind CSS 4, and SvelteKit. Make sure your project uses these before installing.

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

Install sv5ui

Add sv5ui and its peer dependencies to your project.

npm

npm install sv5ui

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 *));

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()}

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>

(Optional) Install peers for advanced features

A few components rely on optional peer dependencies - only install the ones you actually use.

Editor (Tiptap stack)

# Only needed if you import <Editor /> from "sv5ui/editor"
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit \
  @tiptap/extension-bubble-menu @tiptap/extension-character-count \
  @tiptap/extension-drag-handle @tiptap/extension-image \
  @tiptap/extension-mention @tiptap/extension-placeholder \
  @tiptap/extension-table @tiptap/extension-table-cell \
  @tiptap/extension-table-header @tiptap/extension-table-row \
  @tiptap/extension-text-align @tiptap/extension-typography \
  @tiptap/extension-youtube @tiptap/suggestion tiptap-markdown

Form validation schema

# <Form schema={...}> works with any one of these.
# Pick whichever you already use:
npm install zod        # Zod 3.24+ or 4.x
npm install valibot    # Valibot 1.0+
npm install yup        # Yup 1.7+
npm install joi        # Joi 17+ or 18+

Introduction Theming