Introduction

Mizu is a design system for AI products, built for Svelte 5 and Tailwind v4. Build conversations, voice, and agent workflows, then carry the same language into installable apps and the websites that launch them. Every component is source you copy into your project and own.

What is inside

• AI. Chat input, streaming text, reasoning, tool calls, sources, the voice orb, and Presence, a companion that shows what the assistant is doing.
• Motion. Duration, easing, and spring tokens, shared animations, and text and number effects. See the motion guide.
• Apps. A tab bar, install prompt, offline status, and safe-area utilities for mobile web apps and PWAs. See Apps and PWAs.
• The essentials. Forms, overlays, menus, navigation, and data display, all on the same tokens.

The language

Black, white, and neutral grays give the interface its structure. Color marks status and AI activity. Controls remain distinct on each surface, with visible focus and readable labels in light and dark themes.

Principles

• Quiet by default. Hierarchy comes from space, tonal fills, and type, not decoration. The accent is for what matters.
• Accessible underneath. Interactive components wrap bits-ui primitives for established keyboard and screen-reader behavior. Supply meaningful labels and test the completed flow in your app.
• Yours to own. Components are copied into your project as source. No black-box dependency, no version lock.
• Tokens all the way down. One theme file drives color, space, type, and motion on every surface, in a neutral light mode and a pure-black dark mode.
• Alive when it matters. Motion responds at once and settles softly. Looping motion is reserved for moments when an AI is working.

How it ships

Every component is source you copy into your project and own. Add one with a single command using the CLI you already have, point an AI agent at the clean per-component JSON, or copy the code straight from any component page. 169 components are ready today.