Installation
Set up lily in your SvelteKit project and add your first component.
lily is a copy-and-own component library: the CLI scaffolds the design tokens and drops component source directly into your project, so you own and can edit every file.
Prerequisites
lily builds on Tailwind CSS v4 and Svelte 5, so make sure your project has both before you run the CLI.
- Svelte 5, since the components are written with runes (
$props,$state,$derived). - Tailwind CSS v4, since the design tokens rely on the v4 engine and CSS-first config.
Missing one of these?
Running init on a Tailwind v3 or Svelte 4 project stops with a requires Tailwind CSS v4 and Svelte v5 error. Upgrade first, or start from the fresh SvelteKit setup below, which includes both.
Create a project (if you don't have one).
Spin up a new SvelteKit project with Tailwind CSS v4 already wired up using the sv CLI. Skip this step if you're adding lily to an existing Svelte 5 + Tailwind v4 project.
Initialize lily in your project.
Run the init command once per project. It creates a lily.json file, wires up the cn utility, and writes the lily design tokens directly into your global stylesheet — so you own and can edit every token.
Diamond is the default. To start with Aquamarine, run lily-svelte@latest init --style aquamarine. The choice is saved in lily.json and applies to added components and dependencies. Changing that value does not restyle installed source. For an existing project, generate the other style in a separate project and merge the changes into your customized files.
Add components.
Add any component with the add command. The source is copied into $lib/components/ui/<name> so you can read and customize it.
You can add several at once:
Use the component.
Import it from your local ui directory and start building.
<script lang="ts">
import { Button } from '$lib/components/ui/button';
</script>
<Button>Click me</Button>lily.json
lily.json records your project settings (aliases and the path lily writes components to) so the CLI knows where to place new files on every add. You normally do not need to edit it by hand.
The file used to be called components.json — the same name shadcn-svelte uses. Running init on an older lily project moves the settings across and removes the old file. A components.json belonging to another tool is left alone, so lily and shadcn-svelte can live in one project while you migrate screen by screen.
Design tokens
The lily aesthetic comes from a small set of CSS variables (such as --text, --bg, and --bg-elevated) written into your global stylesheet on init, so you can edit them freely. Components reference them with Tailwind's arbitrary-value syntax, like text-(--text)/72 and bg-(--bg-elevated), so theming stays consistent across every component.