Installation

Add Sveltery UI to a SvelteKit app.

Sveltery UI needs a Svelte 5 app with Tailwind CSS 4. These steps use SvelteKit.

Not on npm yet

Sveltery UI and Sveltery Base are not published. The steps below install Base from GitHub and copy the UI source into your app.

Create a project

Create a SvelteKit app, then add Tailwind CSS to it.

pnpm dlx sv create my-app

pnpm dlx sv add tailwindcss

Install the dependencies

pnpm add github:sveltery/base cn class-variance-authority tw-animate-css shadcn

pnpm builds Base from source on install. If pnpm asks, allow the build with the key that it prints in pnpm-workspace.yaml.

Add the styles

Import the Sveltery UI theme in your global stylesheet. The shadcn package provides shadcn/tailwind.css.

src/app.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

The base layer gives every border the theme's --border color. Without it, a bare border class draws in the text color.

Then copy the theme tokens from the theming page into the same file.

Add components

Open a component page, for example Button, and copy its source into src/lib/components/ui.

Use a component

src/routes/+page.svelte

<script lang="ts">
  import { Button } from '$lib/components/ui/button';
</script>

<Button onclick={() => alert('Hello')}>Click me</Button>