Installation

Mizu is a shadcn-svelte-compatible registry. After a one-time setup, add any component with a single command; the source lands in your project and is yours to edit.

1. Create a SvelteKit + Tailwind v4 app

2. Add a components.json

This tells the CLI where to place files. Create components.json at the project root:

{
  "$schema": "https://shadcn-svelte.com/schema.json",
  "tailwind": { "css": "src/app.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"
}

Or run npx shadcn-svelte@latest init to generate one interactively (pick any base color, you'll replace its theme next).

3. Add the theme

Paste the Mizu theme into your src/app.css, right after @import 'tailwindcss';. It is one portable file (copy it from the repo's src/app.css, or grab the token block from the Theming page). It defines the palette, surface utilities, pastel auras, elevation, and fonts.

4. Add components

Now the one-liner. It pulls the component, installs its npm dependencies, and adds the shared cn helper automatically:

Add several at once:

Pinned and latest installs

The commands above pin Mizu v0.1.4, so the source and dependency ranges stay reproducible. Use the explicit latest channel only when you intend to update and have reviewed the compatibility policy and changelog.

Prefer not to use the CLI? Every component page has its full source ready to copy straight into src/lib/components/ui/ (you'll also want src/lib/utils.ts and the theme).