Studio
2

Installation

Prerequisites

  • Svelte 5.56 or newer, with or without SvelteKit
  • Tailwind CSS v4

Package import

Install the library and import components from @mielui/svelte .

pnpm add @mielui/svelte
# npm i @mielui/svelte
# yarn add @mielui/svelte

Import the stylesheet once in src/app.css .

@import '@mielui/svelte/ui.css';

Use a component:

<script>
  import { Button } from '@mielui/svelte';
</script>

<Button>Get started</Button>

Compound components expose named parts. Import Dialog and compose Dialog.Root with Dialog.Content and the other parts you need.

CLI source copy

The CLI copies source into your project. The package name is @mielui/svelte ; the binary is mielui .

1. Create a project

Skip project creation and Tailwind setup if your app already has both.

pnpm dlx sv create my-app

2. Add Tailwind v4

cd my-app && pnpm dlx sv add tailwindcss

3. Initialize Mielui

Run this from the project root to create src/lib/mielui/ for styles and utilities, plus mielui.json .

pnpm dlx @mielui/svelte init -y

4. Import the stylesheet

/* src/app.css */
@import './lib/mielui/ui.css';

5. Add components

pnpm dlx @mielui/svelte add button
pnpm dlx @mielui/svelte list

6. Use them

<script>
  import { Button } from '$lib/mielui/components/button';
</script>

<Button>Get started</Button>

Notes

  • Tailwind v3 is not supported. Mielui needs v4 @theme and color-mix .
  • Dark mode uses a.dark class on <html> .
  • Built-in theme presets install with pnpm dlx @mielui/svelte add theme <slug> Usedefault to start with the default preset.

Next

Theming · Components