Studio
2

Introduction

Build with Mielui

Mielui brings components, motion, and theming together for Svelte 5. Start with everyday controls, compose more involved interfaces from named parts, and tune their appearance through a shared set of theme tokens.

The library includes inputs, navigation, dialogs, data displays, charts, and AI interface components. Each component page pairs a live preview with source examples and an API reference, so you can try the behavior before adding it to your project.

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 imports and CLI source copy compared
DecisionPackage importCLI source copy
Best fitUse the library through its public API.Adapt component internals for your product.
SourceImported from @mielui/svelte.Copied into your repository.
CustomizationCompose parts, set props, and apply classes or tokens.Use the same options, plus edit the source directly.
UpdatesUpgrade the package dependency.Review upstream changes alongside your local edits.

If you are trying Mielui for the first time, package imports are a straightforward place to start. 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

Use pnpm, npm, or Yarn to install the library. The examples below use pnpm. 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

FollowInstallation 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. Shared tokens keep your controls and surfaces consistent as the interface grows.

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

Where to go next

Installation
Set up package imports or the source-copy workflow.
Components
Explore live examples, supported props, and composition patterns.
Theming
Apply a preset or connect theme tokens to your own design.
Agent skill
Give your coding agent Mielui-specific guidance for implementation.