Mizu 水

A Frutiger Aero design system for Svelte.

Glossy, glassy, gorgeously rounded components for SvelteKit. The optimism of early-2000s UI, rebuilt for Svelte 5 and Tailwind v4. Copy in what you need.

---

Mizu brings back the aesthetic of clear skies, water droplets, and wet glass: frosted surfaces, a real top sheen, layered light, and generous rounding, applied with restraint so it feels polished instead of busy. It ships the way shadcn-svelte does. You do not install a black box, you copy the source into your project and own it.

Highlights

• 50 components, from buttons and dialogs to a command palette, a blooming orb, and rising bubbles.
• Recolor from one token. The gloss gradients, glow, and focus ring all derive from --primary — change it once and the whole system follows.
• Physically honest. Gloss, glass, and glow come from real CSS, never baked-in screenshots.
• Svelte 5 native. Runes and snippets throughout, with bits-ui handling accessible behavior under the glossy skin.
• Light and deep water. A clean neutral light theme and a neutral deep-dark theme, both with the aqua accent on top.
• Copy in, own it. A shadcn-svelte-compatible registry, plus full source on every component page.

Quick start

Mizu runs on SvelteKit, Svelte 5, and Tailwind v4.

1. Create the app:

npx sv create my-app
cd my-app
npx sv add tailwindcss

2. 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/button.json

You can also open any component page in the docs and copy its source straight into src/lib/components/ui/.

The registry is served from mizu-ui.com. If you fork Mizu, point repo and registryBase in src/lib/site/config.ts at your own deployment and re-run pnpm registry:build.

Usage

<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 skies</Card.Title>
		<Card.Description>A frosted-glass surface with a wet top sheen.</Card.Description>
	</Card.Header>
	<Card.Footer>
		<Button class="w-full">Continue</Button>
	</Card.Footer>
</Card.Root>

Theming

The brand is one token. Change --primary and the gloss gradients, glow, and focus ring follow, derived with color-mix:

:root {
	--primary: #01b2ff; /* aqua, the default */
}

Everything is driven by CSS variables — a clean light mode and a deep-water dark mode out of the box, plus a single --primary token (the default is aqua #01b2ff) that recolors the whole system without touching a component.

Components

Group	Components
Actions	Button, Badge, Button Group
Forms	Input, Textarea, Label, Checkbox, Radio Group, Switch, Slider, Select, Native Select, Combobox, Toggle, Toggle Group, Input OTP, Input Group, Field
Surfaces	Card, Alert, Separator, Avatar, Aspect Ratio, Scroll Area, Table, Empty, Item, Kbd
Overlays	Dialog, Alert Dialog, Sheet, Popover, Tooltip, Hover Card
Menus	Dropdown Menu, Context Menu, Menubar, Navigation Menu, Command
Navigation	Tabs, Accordion, Collapsible, Breadcrumb, Pagination
Feedback	Progress, Skeleton, Spinner, Circular Gauge
Effects	Orb, Bubbles

Develop

pnpm install
pnpm dev              # docs site + live previews
pnpm check            # type-check
pnpm registry:build   # regenerate static/r/*.json from the component source

The 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.

Built with

Svelte 5, SvelteKit, Tailwind CSS v4, bits-ui, tailwind-variants, and Lucide icons (with Phosphor in the docs site). Inspired by shadcn-svelte and HeroUI, and the Frutiger Aero era.

License

MIT