Get started

Introduction

Mielui is a component library for Svelte 5 and Tailwind v4. It includes components, theme tokens, and a CLI for copying source into your project.

Build with Mielui

Start with everyday controls, compose larger interfaces from named parts, and tune everything through one set of theme tokens. Each component page pairs a live preview with source examples and an API reference.

Choose how to use it

Both paths use the same components and theme system. Choose based on whether you want dependency updates or direct ownership of the implementation.

Package import

Best fit Use the library through its public API.
Source Imported from @mielui/svelte.
Customization Compose parts, set props, and apply classes or tokens.
Updates Upgrade the package dependency.

CLI source copy

Best fit Adapt component internals for your product.
Source Copied into your repository.
Customization Use the same options, plus edit the source directly.
Updates Review upstream changes alongside your local edits.

Trying Mielui for the first time? Start with package imports. Choose source copy when you already know you need to change component behavior.

Requirements

Svelte 5.56 or newer, with or without SvelteKit
Tailwind CSS v4
Package manager pnpm, npm, Yarn, or Bun

Start with an existing Svelte app and import the Mielui stylesheet once at the application level.

Quick start

Install the package:

pnpm add @mielui/svelte

Import the shared styles in your application stylesheet:

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

Then use your first component:

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

<Button>Get started</Button>

Prefer local source? Initialize the CLI and add a component instead:

pnpm dlx @mielui/svelte init -y
pnpm dlx @mielui/svelte add button

Follow Installation for the local stylesheet import, component paths, and full setup for either approach.

Make it your own

Set colors, typography, corners, spacing, and motion together in Theme Studio. Preview the result on working components, then export CSS or JSON.

Compound components expose named parts such as Root, Trigger, and Content. Compose the parts shown on each component page, and use classes to adjust individual regions without replacing the whole component.