Svelte 5 source kit Read the setup notes

Mittsu UI for native-feeling product software.

A source-first component and chart system for dense tools, local-first apps, admin consoles, and agent-built interfaces that need to stay coherent.

Mittsu Workbench

Shell primitives 9

UI-001 AppShell and Sidebar scaffold source MT

UI-002 Command palette and keyboard affordances token S5

UI-003 Inspector with grouped properties docs D3

⌘K Find any primitive

SOURCE-FIRST SVELTE 5 D3 SVG CSS TOKENS NO TAILWIND REQUIRED

94 components

8 charts

11 categories

0 runtime lock-in

What's inside

A quieter system for complicated product surfaces.

Mittsu uses the same plain, low-friction visual language as the SaaS example: hairline grids, compact controls, earned accent color, and UI that stays out of the way.

Copy the source

The CLI drops Svelte and CSS files into your repo. Own the implementation, keep the API small, and fork without waiting on a package release.

Native product rhythm

Sidebars, title bars, command surfaces, status rows, inspectors, and dense tables share one quiet operating-system voice.

Charts that belong

D3-powered SVG charts use the same tokens as the UI kit, so operational data reads like part of the application.

Tokened by default

Materials, foregrounds, lines, radii, focus rings, charts, and semantic status colors are CSS variables you can override.

LLM-friendly APIs

Named variants, plain data arrays, and predictable prop shapes make generated screens easier to review and repair.

Accessible foundations

Keyboard paths, focus states, aria labels, and headless primitives are part of the baseline rather than a separate pass.

Design system

One token namespace. Every surface.

Materials, text, borders, focus rings, charts, and semantic states all use the --uin-* namespace. Override the variables, not every component.

Light, dark, and system themes
macOS-style materials without platform lock-in
Chart palettes that share UI semantics

tokens.css

/* Materials flip with theme automatically */
:root {
  --uin-accent:     #3b6cf6;
  --uin-fg:         #1c1d22;
  --uin-mat-window: #fbfbfd;
  --uin-line:       color-mix(in srgb, #1c1d22 12%, transparent);
}

[data-theme='dark'] {
  --uin-fg:         #ebebf0;
  --uin-mat-window: #171719;
}

Quick start

Empty directory to running app.

No config spelunking. Scaffold a Vite + Svelte 5 project, let the CLI copy the source in, and you're rendering components in about a minute.

1Scaffold a Vite + Svelte 5 app
2init writes components.json and copies the tokens
3add drops component source into src/lib
4Import tokens.css once, then run dev

zsh — my-app

$ npm create vite@latest my-app -- --template svelte-ts
$ cd my-app && npm install
$ npx @a3tai/mittsu@latest init
✓ wrote components.json + src/lib/styles/tokens.css
$ npx @a3tai/mittsu add button badge stat
✓ 3 components -> src/lib/components/ui
$ npm run dev
-> Local: http://localhost:5173/