The design system for AI products.
Clean, airy components for AI products and the designers building them. Chat, voice, reasoning, and streaming for Svelte 5 and Tailwind v4. Copy in what you need.
Mizu provides Svelte components for chat, voice, forms, and application layouts. The default theme uses black, white, and neutral grays. Color marks AI activity and status. Components ship as source, with their styles and behavior available to edit in your project.
- 80 components, from buttons and dialogs to streaming text, visible reasoning, tool calls, a voice orb, and a drifting pastel aurora.
- Recolor from one token. Accent states, primary-derived effects, and the focus ring follow
--primary. - Quiet by default. Hierarchy comes from space, tonal surfaces, and type. The accent and the glow are reserved for what matters.
- Svelte 5 native. Runes and snippets throughout, with bits-ui handling accessible behavior under the quiet skin.
- Light and dark themes. White and pure-black page backgrounds, neutral card and control fills, and contrasting text.
- Copy in, own it. A shadcn-svelte-compatible registry, plus full source on every component page.
The current stable release is 0.3.1. Pin it for reproducible installs:
npx shadcn-svelte@latest add https://mizu-ui.com/r/v0.3.1/button.jsonThe 0.4.0-rc.1 candidate adds the motion system. Install it explicitly for testing:
npx shadcn-svelte@latest add https://mizu-ui.com/r/v0.4.0-rc.1/button.json https://mizu-ui.com/r/v0.4.0-rc.1/motion.jsonUpgrading copied components from 0.2.x requires the migrations in the changelog.
Mizu runs on SvelteKit, Svelte 5, and Tailwind v4.
1. Create the app:
npx sv create my-app
cd my-app
npx sv add tailwindcss2. Add a components.json so the CLI knows where to place files (or run npx shadcn-svelte@latest init to generate it). Point tailwind.css at your Tailwind entry, the file that holds @import 'tailwindcss';. Recent sv add tailwindcss creates src/routes/layout.css; older setups use src/app.css. Use whichever you have:
{
"$schema": "https://shadcn-svelte.com/schema.json",
"tailwind": { "css": "src/routes/layout.css", "baseColor": "neutral" },
"aliases": {
"lib": "$lib",
"utils": "$lib/utils",
"components": "$lib/components",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks"
},
"typescript": true,
"registry": "https://shadcn-svelte.com/registry"
}3. Add the theme: paste Mizu's src/app.css (this repo's) into that same Tailwind entry file, right after @import 'tailwindcss';.
4. Add components with the one-liner. It pulls the component, installs its npm dependencies, and adds the shared cn helper automatically:
npx shadcn-svelte@latest add https://mizu-ui.com/r/v0.3.1/button.jsonYou can also open any component page in the docs and copy its source straight into src/lib/components/ui/.
Versioned registry URLs are immutable. Use
/r/latest/<item>.jsononly when you intentionally want the newest release. See the compatibility policy. If you fork Mizu, pointrepoandregistryBaseinsrc/lib/site/config.tsat your own deployment and re-runpnpm registry:build.
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
</script>
<Card.Root class="max-w-sm">
<Card.Header>
<Card.Title>Clear morning</Card.Title>
<Card.Description>A quiet white surface with a soft shadow.</Card.Description>
</Card.Header>
<Card.Footer>
<Button class="w-full">Continue</Button>
</Card.Footer>
</Card.Root>The default primary is black in light mode and white in dark mode. Custom themes should set the primary color and its foreground together:
:root {
--primary: #171717;
--primary-foreground: #ffffff;
}
.dark {
--primary: #f5f5f5;
--primary-foreground: #171717;
}CSS variables also define card, popover, and control fills. Reinstall the theme with updated components to receive the --control token, and check custom colors against each containing background. See the theming guide.
Mizu currently includes 80 components across AI, motion, actions, forms, surfaces, overlays, menus, navigation, and feedback. Browse the complete, source-backed component catalog.
pnpm install
pnpm dev # docs site + live previews
pnpm check # type-check
pnpm registry:build # regenerate compatibility, latest, and versioned registry output
pnpm registry:validate # verify schemas, dependency parity, inventory, and integrityThe docs site lives in src/routes, components in src/lib/components/ui, the design tokens in src/app.css, and the site chrome (landing showcase, theming, command palette) in src/lib/site. To add a component: build it, list it in src/lib/site/components.json, write a demo in src/lib/site/demos, and re-run the registry build.
Svelte 5, SvelteKit, Tailwind CSS v4, bits-ui, tailwind-variants, and Lucide icons. Inspired by shadcn-svelte and the quiet confidence of modern AI interfaces.