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.

Initialize lily in your project.

Run the init command once per project. It creates a components.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.

npx lily-svelte@latest init

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.

npx lily-svelte@latest add button

You can add several at once:

npx lily-svelte@latest add card badge avatar

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>

components.json

components.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.

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.

← Introduction Dark Mode →