Getting started

Installation

Add the kit to a SvelteKit project: install the package, set up Tailwind CSS v4, import one stylesheet and render a component.

Requirements

Svelte 5: the components are written with runes and snippets.
Tailwind CSS v4: the theme tokens are declared in an @theme block.
Lucide: the components draw their icons from @lucide/svelte, which the kit names as a peer dependency.
Node 24 or newer.

1. Install the package

pnpm add @lyeve-labs/ui-kit
# or
npm install @lyeve-labs/ui-kit
# or
yarn add @lyeve-labs/ui-kit

2. Set up Tailwind v4

If the project does not use Tailwind v4 yet, add it with its Vite plugin:

pnpm add -D tailwindcss @tailwindcss/vite

vite.config.ts ts

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()],
});

3. Import the stylesheet

Drop a single import at the top of your app's root stylesheet. The file declares the theme tokens, sets up Tailwind, and applies a small base layer.

src/app.css css

@import '@lyeve-labs/ui-kit/styles.css';

/* Your own base + utilities go below. */

And import that CSS once from your root layout:

src/routes/+layout.svelte svelte

<script lang="ts">
  import '../app.css';
  let { children } = $props();
</script>

{@render children()}

4. Set the theme before the first paint

Add the inline boot script to your app.html so the theme is applied before paint:

src/app.html html

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    %sveltekit.head%
    <script>
      (function () {
        try {
          var stored = localStorage.getItem('lyeve-theme');
          var prefersLight = window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: light)').matches;
          var theme = stored === 'light' || stored === 'dark'
            ? stored
            : prefersLight ? 'light' : 'dark';
          document.documentElement.setAttribute('data-theme', theme);
        } catch (_) {
          document.documentElement.setAttribute('data-theme', 'dark');
        }
      })();
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

5. Render something

src/routes/+page.svelte svelte

<script lang="ts">
  import { Button, Card } from '@lyeve-labs/ui-kit';
</script>

<Card title="It works" description="One stylesheet, one import, dark by default.">
  <Button>Get started</Button>
</Card>

Mounting toasts

If you want toast notifications, render <Toaster /> once at the root of your layout. See the Toast docs for the full setup.