Installation

Add distill-ui to a Svelte 5 project. You don't need Tailwind.

With the CLI

1. Set up the tokens

Run this in your project's folder:

npx distill-ui init

It does three things:

• copies the tokens into src/lib/styles/distill-ui,
• imports them in src/routes/+layout.svelte (and creates that file if needed),
• saves where things go in distill-ui.json.

{
	"framework": "svelte",
	"components": "src/lib/components/ui",
	"styles": "src/lib/styles/distill-ui"
}

Change the folders in that file before adding components if you want them somewhere else.

2. Add components

npx distill-ui add button dialog

This copies each component into src/lib/components/ui, along with any other component it uses (Dialog uses Button). It also installs melt and @floating-ui/dom with your package manager when a component needs them. Run npx distill-ui list to see everything you can add, or npx distill-ui add --all to add it all.

The CLI never replaces a file you've changed. Pass --overwrite if you want the latest version back.

3. Use them

<script lang="ts">
	import { Button } from '#lib/components/ui/button/index.js';
	import * as Dialog from '#lib/components/ui/dialog/index.js';
</script>

<Button>Click me</Button>

SvelteKit 3 projects import from src/lib with #lib and the full path to index.js. Older projects use $lib/components/ui/button.

Manually

Everything the CLI does, you can do by copying files yourself.

1. Copy the packages/tokens folder from the GitHub repo into src/lib/styles/distill-ui: tokens.css, motion.css and the themes folder.
2. Import the tokens once, in your root layout:

   <script lang="ts">
   	import '#lib/styles/distill-ui/tokens.css';
   
   	let { children } = $props();
   </script>
   
   {@render children()}
   

3. Install the packages that dialogs, menus and other interactive components use:

   npm install melt@0.44.0 @floating-ui/dom
   

4. Copy the files from each component's page, under Installation → Manual, into src/lib/components/ui/<component>.

Next: Theming →