# Mizu · The design system for AI products

> A clean, airy design system for AI products and the designers building them. Chat, voice, reasoning, and streaming components for Svelte 5 and Tailwind v4. Copy in what you need.

Mizu is a design system for AI products: chat, voice, reasoning, and streaming components plus the classic primitives around them. You copy the source into your own project and own it, with no runtime dependency on Mizu. It targets SvelteKit, Svelte 5 (runes), and Tailwind v4, with accessible behavior from bits-ui. Recolor the whole system by changing one token (`--primary`).

## Install a component

```bash
npx shadcn-svelte@latest add https://mizu-ui.com/r/v0.1.4/button.json
```

Each component page below has a live demo, an auto-generated props table, and the full source.

## Docs

- [Introduction](https://mizu-ui.com/docs): Start with the Mizu design language and component system.
- [Installation](https://mizu-ui.com/docs/installation): Set up SvelteKit, Tailwind, and the Mizu registry.
- [Theming](https://mizu-ui.com/docs/theming): Configure the token system and light and dark modes.
- [Usage](https://mizu-ui.com/docs/usage): Apply Mizu composition and interface conventions.
- [Compatibility](https://mizu-ui.com/docs/compatibility): Understand Mizu versions, pinned installs, deprecations, and migrations.
- [Build a chat](https://mizu-ui.com/docs/build-a-chat): Compose the AI components into a complete assistant screen.
- [UI for Agents](https://mizu-ui.com/docs/agents): Configure coding agents to install and compose Mizu.
- [Components](https://mizu-ui.com/docs/components): Browse the complete Mizu component catalog.
- [Blocks](https://mizu-ui.com/blocks): Install complete Mizu screens and flows.

## Blocks

- [Assistant chat](https://mizu-ui.com/blocks#assistant-chat): The full conversation screen: reasoning, a tool call, a streaming reply with sources and actions, starter prompts, and the composer.
- [Voice mode](https://mizu-ui.com/blocks#voice-mode): A fullscreen listening surface on a drifting aurora: the orb, a live waveform, and mute and done controls.
- [Personalize](https://mizu-ui.com/blocks#personalize): Onboarding for a companion: pick a style from aura tiles, set the conversation tone, grant permissions, and create.
- [Agent dashboard](https://mizu-ui.com/blocks#agent-dashboard): A working session at a glance: your agents, a live plan with a running tool, focus for the day, and a proactive nudge.
- [Agent run](https://mizu-ui.com/blocks#agent-run): A single run up close: the plan advancing, a live tool call, streaming findings, and pause and stop controls.
- [Sidebar layout](https://mizu-ui.com/blocks#sidebar-layout): The full app shell: an icon-collapsible sidebar with chats and a group action, and a conversation in the inset.
- [Login](https://mizu-ui.com/blocks#login): A quiet sign-in card with the orb, email and password, and GitHub.
- [Sign up](https://mizu-ui.com/blocks#signup): Account creation ending in the gradient create button.
- [Verify code](https://mizu-ui.com/blocks#otp): Six-digit email verification with resend.

## AI

- [Aurora](https://mizu-ui.com/docs/components/aurora): A slow, drifting pastel-aura backdrop. (registry: https://mizu-ui.com/r/v0.1.4/aurora.json)
- [Chat Input](https://mizu-ui.com/docs/components/chat-input): A pill composer with attach, voice, and send, ready for a companion. (registry: https://mizu-ui.com/r/v0.1.4/chat-input.json)
- [Chat Bubble](https://mizu-ui.com/docs/components/chat-bubble): User and assistant message bubbles, flat and quiet. (registry: https://mizu-ui.com/r/v0.1.4/chat-bubble.json)
- [Streaming Text](https://mizu-ui.com/docs/components/streaming-text): Token-by-token text that types itself in, caret and all. (registry: https://mizu-ui.com/r/v0.1.4/streaming-text.json)
- [Reasoning](https://mizu-ui.com/docs/components/reasoning): A collapsible chain of thought: shimmers while thinking, folds away when done. (registry: https://mizu-ui.com/r/v0.1.4/reasoning.json)
- [Tool Call](https://mizu-ui.com/docs/components/tool-call): Live status for a tool the assistant is using, with an expandable result. (registry: https://mizu-ui.com/r/v0.1.4/tool-call.json)
- [Sources](https://mizu-ui.com/docs/components/sources): Numbered citation chips that ground an answer. (registry: https://mizu-ui.com/r/v0.1.4/sources.json)
- [Message Actions](https://mizu-ui.com/docs/components/message-actions): Copy, regenerate, and feedback beneath a reply. (registry: https://mizu-ui.com/r/v0.1.4/message-actions.json)
- [Plan](https://mizu-ui.com/docs/components/plan): The agent's step list: shimmer while working, checks as it lands. (registry: https://mizu-ui.com/r/v0.1.4/plan.json)
- [Nudge](https://mizu-ui.com/docs/components/nudge): A proactive suggestion from the assistant, easy to act on or dismiss. (registry: https://mizu-ui.com/r/v0.1.4/nudge.json)
- [Aura Tile](https://mizu-ui.com/docs/components/aura-tile): Seeded pastel cover art for anything the AI generates. (registry: https://mizu-ui.com/r/v0.1.4/aura-tile.json)
- [Voice Orb](https://mizu-ui.com/docs/components/voice-orb): The assistant's presence: a pastel orb that listens, thinks, and speaks. (registry: https://mizu-ui.com/r/v0.1.4/voice-orb.json)
- [Waveform](https://mizu-ui.com/docs/components/waveform): Animated voice bars for listening and speaking states. (registry: https://mizu-ui.com/r/v0.1.4/waveform.json)
- [Prompt Suggestions](https://mizu-ui.com/docs/components/prompt-suggestions): Starter prompt chips that invite the first message. (registry: https://mizu-ui.com/r/v0.1.4/prompt-suggestions.json)
- [Thinking](https://mizu-ui.com/docs/components/thinking): Shimmer and typing-dot indicators for a working assistant. (registry: https://mizu-ui.com/r/v0.1.4/thinking.json)

## Actions

- [Button](https://mizu-ui.com/docs/components/button): Pill-shaped actions with seven flat, quiet variants. (registry: https://mizu-ui.com/r/v0.1.4/button.json)
- [Badge](https://mizu-ui.com/docs/components/badge): Compact status pills in soft intent colors. (registry: https://mizu-ui.com/r/v0.1.4/badge.json)
- [Button Group](https://mizu-ui.com/docs/components/button-group): Buttons joined into one segmented control. (registry: https://mizu-ui.com/r/v0.1.4/button-group.json)

## Forms

- [Input](https://mizu-ui.com/docs/components/input): A pill text field with a quiet fill and a primary focus ring. (registry: https://mizu-ui.com/r/v0.1.4/input.json)
- [Textarea](https://mizu-ui.com/docs/components/textarea): Multi-line input matching the field style. (registry: https://mizu-ui.com/r/v0.1.4/textarea.json)
- [Label](https://mizu-ui.com/docs/components/label): An accessible, selectable form label. (registry: https://mizu-ui.com/r/v0.1.4/label.json)
- [Checkbox](https://mizu-ui.com/docs/components/checkbox): A rounded tile that fills solid blue with a check. (registry: https://mizu-ui.com/r/v0.1.4/checkbox.json)
- [Radio Group](https://mizu-ui.com/docs/components/radio-group): Single-select circles that light up with a blue dot. (registry: https://mizu-ui.com/r/v0.1.4/radio-group.json)
- [Switch](https://mizu-ui.com/docs/components/switch): A flat iOS-style toggle with a white thumb. (registry: https://mizu-ui.com/r/v0.1.4/switch.json)
- [Slider](https://mizu-ui.com/docs/components/slider): A quiet track with a blue range and a white thumb. (registry: https://mizu-ui.com/r/v0.1.4/slider.json)
- [Select](https://mizu-ui.com/docs/components/select): A clean dropdown with highlighted items. (registry: https://mizu-ui.com/r/v0.1.4/select.json)
- [Combobox](https://mizu-ui.com/docs/components/combobox): A searchable select in a clean popover. (registry: https://mizu-ui.com/r/v0.1.4/combobox.json)
- [Toggle](https://mizu-ui.com/docs/components/toggle): A two-state button with a soft pressed look. (registry: https://mizu-ui.com/r/v0.1.4/toggle.json)
- [Toggle Group](https://mizu-ui.com/docs/components/toggle-group): A segmented set of toggles in a pill rail. (registry: https://mizu-ui.com/r/v0.1.4/toggle-group.json)
- [Input OTP](https://mizu-ui.com/docs/components/input-otp): Minimal one-time-code cells. (registry: https://mizu-ui.com/r/v0.1.4/input-otp.json)
- [Input Group](https://mizu-ui.com/docs/components/input-group): An input fused with leading or trailing add-ons. (registry: https://mizu-ui.com/r/v0.1.4/input-group.json)
- [Field](https://mizu-ui.com/docs/components/field): Label, control, hint, and error, grouped. (registry: https://mizu-ui.com/r/v0.1.4/field.json)
- [Native Select](https://mizu-ui.com/docs/components/native-select): A styled native select, no JS required. (registry: https://mizu-ui.com/r/v0.1.4/native-select.json)
- [Calendar](https://mizu-ui.com/docs/components/calendar): A clean month grid with a solid blue selected day. (registry: https://mizu-ui.com/r/v0.1.4/calendar.json)
- [Range Calendar](https://mizu-ui.com/docs/components/range-calendar): Pick a span of dates with a clean month grid. (registry: https://mizu-ui.com/r/v0.1.4/range-calendar.json)
- [Date Picker](https://mizu-ui.com/docs/components/date-picker): A pill date field with a popover calendar. (registry: https://mizu-ui.com/r/v0.1.4/date-picker.json)
- [Rating](https://mizu-ui.com/docs/components/rating): Fillable symbols for a quick score. (registry: https://mizu-ui.com/r/v0.1.4/rating.json)
- [Tags Input](https://mizu-ui.com/docs/components/tags-input): A field that collects entries as soft pill chips. (registry: https://mizu-ui.com/r/v0.1.4/tags-input.json)

## Surfaces

- [Card](https://mizu-ui.com/docs/components/card): The signature surface: quiet fill, generous radius, soft shadow. (registry: https://mizu-ui.com/r/v0.1.4/card.json)
- [Alert](https://mizu-ui.com/docs/components/alert): Quiet callouts in four intents. (registry: https://mizu-ui.com/r/v0.1.4/alert.json)
- [Separator](https://mizu-ui.com/docs/components/separator): A subtle semantic divider for sections. (registry: https://mizu-ui.com/r/v0.1.4/separator.json)
- [Avatar](https://mizu-ui.com/docs/components/avatar): A rounded image with a graceful fallback. (registry: https://mizu-ui.com/r/v0.1.4/avatar.json)
- [Scroll Area](https://mizu-ui.com/docs/components/scroll-area): A scroll container with a slim, quiet bar. (registry: https://mizu-ui.com/r/v0.1.4/scroll-area.json)
- [Aspect Ratio](https://mizu-ui.com/docs/components/aspect-ratio): Hold content to a fixed ratio. (registry: https://mizu-ui.com/r/v0.1.4/aspect-ratio.json)
- [Table](https://mizu-ui.com/docs/components/table): A clean, rounded data table. (registry: https://mizu-ui.com/r/v0.1.4/table.json)
- [Empty](https://mizu-ui.com/docs/components/empty): A friendly empty state. (registry: https://mizu-ui.com/r/v0.1.4/empty.json)
- [Item](https://mizu-ui.com/docs/components/item): A composable list row. (registry: https://mizu-ui.com/r/v0.1.4/item.json)
- [Kbd](https://mizu-ui.com/docs/components/kbd): A keyboard-key badge. (registry: https://mizu-ui.com/r/v0.1.4/kbd.json)
- [Carousel](https://mizu-ui.com/docs/components/carousel): A swipeable slider with pill prev/next controls. (registry: https://mizu-ui.com/r/v0.1.4/carousel.json)
- [Resizable](https://mizu-ui.com/docs/components/resizable): Draggable panes split by a quiet handle. (registry: https://mizu-ui.com/r/v0.1.4/resizable.json)
- [Data Table](https://mizu-ui.com/docs/components/data-table): TanStack-powered tables: sorting, filtering, and pagination you own. (registry: https://mizu-ui.com/r/v0.1.4/data-table.json)
- [Timeline](https://mizu-ui.com/docs/components/timeline): A vertical history with softly glowing markers. (registry: https://mizu-ui.com/r/v0.1.4/timeline.json)

## Overlays

- [Dialog](https://mizu-ui.com/docs/components/dialog): A clean modal floating over a blurred scrim. (registry: https://mizu-ui.com/r/v0.1.4/dialog.json)
- [Popover](https://mizu-ui.com/docs/components/popover): A floating panel anchored to a trigger. (registry: https://mizu-ui.com/r/v0.1.4/popover.json)
- [Tooltip](https://mizu-ui.com/docs/components/tooltip): A small hint shown on hover or focus. (registry: https://mizu-ui.com/r/v0.1.4/tooltip.json)
- [Alert Dialog](https://mizu-ui.com/docs/components/alert-dialog): A clean modal that interrupts for a confirmation. (registry: https://mizu-ui.com/r/v0.1.4/alert-dialog.json)
- [Sheet](https://mizu-ui.com/docs/components/sheet): A panel that slides in from any edge. (registry: https://mizu-ui.com/r/v0.1.4/sheet.json)
- [Drawer](https://mizu-ui.com/docs/components/drawer): A bottom sheet that slides up for quick actions, vaul under the hood. (registry: https://mizu-ui.com/r/v0.1.4/drawer.json)
- [Hover Card](https://mizu-ui.com/docs/components/hover-card): A card revealed on hover or focus. (registry: https://mizu-ui.com/r/v0.1.4/hover-card.json)

## Menus

- [Dropdown Menu](https://mizu-ui.com/docs/components/dropdown-menu): A crisp menu of actions, with submenus and checks. (registry: https://mizu-ui.com/r/v0.1.4/dropdown-menu.json)
- [Context Menu](https://mizu-ui.com/docs/components/context-menu): A right-click menu, clean and quiet. (registry: https://mizu-ui.com/r/v0.1.4/context-menu.json)
- [Menubar](https://mizu-ui.com/docs/components/menubar): A desktop-style bar of dropdown menus. (registry: https://mizu-ui.com/r/v0.1.4/menubar.json)
- [Navigation Menu](https://mizu-ui.com/docs/components/navigation-menu): Site navigation with floating dropdown panels. (registry: https://mizu-ui.com/r/v0.1.4/navigation-menu.json)
- [Command](https://mizu-ui.com/docs/components/command): A searchable command palette. (registry: https://mizu-ui.com/r/v0.1.4/command.json)

## Navigation

- [Tabs](https://mizu-ui.com/docs/components/tabs): A segmented pill switcher with a raised active tab. (registry: https://mizu-ui.com/r/v0.1.4/tabs.json)
- [Accordion](https://mizu-ui.com/docs/components/accordion): Collapsible sections with a smooth height transition. (registry: https://mizu-ui.com/r/v0.1.4/accordion.json)
- [Collapsible](https://mizu-ui.com/docs/components/collapsible): A single open-and-close disclosure. (registry: https://mizu-ui.com/r/v0.1.4/collapsible.json)
- [Breadcrumb](https://mizu-ui.com/docs/components/breadcrumb): A path trail back to the top. (registry: https://mizu-ui.com/r/v0.1.4/breadcrumb.json)
- [Pagination](https://mizu-ui.com/docs/components/pagination): Page-by-page navigation controls. (registry: https://mizu-ui.com/r/v0.1.4/pagination.json)
- [Sidebar](https://mizu-ui.com/docs/components/sidebar): A collapsible app sidebar that folds to a slim rail. (registry: https://mizu-ui.com/r/v0.1.4/sidebar.json)
- [Stepper](https://mizu-ui.com/docs/components/stepper): A multi-step progress trail with quiet nodes. (registry: https://mizu-ui.com/r/v0.1.4/stepper.json)
- [Tree](https://mizu-ui.com/docs/components/tree): A nested, keyboard-navigable file-style tree. (registry: https://mizu-ui.com/r/v0.1.4/tree.json)
- [Dock](https://mizu-ui.com/docs/components/dock): A dock that magnifies icons under the cursor. (registry: https://mizu-ui.com/r/v0.1.4/dock.json)

## Feedback

- [Progress](https://mizu-ui.com/docs/components/progress): A quiet track with a solid blue fill. (registry: https://mizu-ui.com/r/v0.1.4/progress.json)
- [Skeleton](https://mizu-ui.com/docs/components/skeleton): A pulsing placeholder for loading content. (registry: https://mizu-ui.com/r/v0.1.4/skeleton.json)
- [Spinner](https://mizu-ui.com/docs/components/spinner): A minimal loading spinner. (registry: https://mizu-ui.com/r/v0.1.4/spinner.json)
- [Circular Gauge](https://mizu-ui.com/docs/components/circular-gauge): An animated ring gauge with a soft glow. (registry: https://mizu-ui.com/r/v0.1.4/circular-gauge.json)
- [Toast](https://mizu-ui.com/docs/components/toast): Transient notifications that slide in and stack. (registry: https://mizu-ui.com/r/v0.1.4/toast.json)
- [Meter](https://mizu-ui.com/docs/components/meter): A semantic gauge whose fill shifts across thresholds. (registry: https://mizu-ui.com/r/v0.1.4/meter.json)