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, glass and gloss utilities, gradients, 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:

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