Installation

Prerequisites

Package import

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

pnpm add @mielui/svelte

npm i @mielui/svelte

yarn add @mielui/svelte

bun add @mielui/svelte

Import the stylesheet once in src/app.css. It already includes Tailwind, so remove any existing @import 'tailwindcss' line.

@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

npx sv create my-app

yarn dlx sv create my-app

bunx sv create my-app

2. Add Tailwind v4

cd my-app
pnpm dlx sv add tailwindcss

cd my-app
npx sv add tailwindcss

cd my-app
yarn dlx sv add tailwindcss

cd my-app
bunx 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

npx @mielui/svelte init -y

yarn dlx @mielui/svelte init -y

bunx @mielui/svelte init -y

4. Import the stylesheet

The copied stylesheet already includes Tailwind. Replace the @import 'tailwindcss' line that the Tailwind setup added.

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

5. Add components

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

npx @mielui/svelte add button
npx @mielui/svelte list

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

bunx @mielui/svelte add button
bunx @mielui/svelte list

6. Use them

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

<Button>Get started</Button>

Notes

Next