# Mittsu (@a3tai/mittsu)

> Source-first Svelte 5 component and chart library tuned to feel native on macOS / iOS. The CLI drops raw .svelte + .css files into your project — you own the source, override CSS-variable tokens (the --uin-* namespace), and fork without waiting on a release. Components ship with BEM class names, no Svelte scoping, and headless behavior from bits-ui where it matters. Designed with LLM-friendly APIs: named variants, plain data arrays, predictable prop shapes.

Mittsu is distributed by copying source into your project, not as a runtime
dependency. Install the CLI once, then add components individually:

```
npx @a3tai/mittsu@latest init
npx @a3tai/mittsu@latest add button badge spinner
```

## Documentation

- [Getting started](https://github.com/a3tai/mittsu/blob/main/docs/getting-started.md): Install the CLI, run init, add your first component, import tokens.
- [CLI reference](https://github.com/a3tai/mittsu/blob/main/docs/cli.md): Every command and flag the @a3tai/mittsu CLI exposes (init, add, list, info).
- [Design tokens](https://github.com/a3tai/mittsu/blob/main/docs/tokens.md): The 37 CSS variables under --uin-* that drive color, type, spacing, radius, motion, and focus.
- [Charts](https://github.com/a3tai/mittsu/blob/main/docs/charts.md): D3-powered SVG chart sub-package and how it shares tokens with the UI kit.
- [Icons](https://github.com/a3tai/mittsu/blob/main/docs/icons.md): Lucide (@lucide/svelte) as the supported icon library: sizing, stroke width, a11y, and swapping in other sets.
- [Architecture](https://github.com/a3tai/mittsu/blob/main/docs/architecture.md): How the registry, CLI, and import rewriter fit together; copy semantics.
- [Component authoring](https://github.com/a3tai/mittsu/blob/main/docs/component-authoring.md): Conventions for writing a new component: file pair, registry entry, BEM, tokens.
- [Deployment](https://github.com/a3tai/mittsu/blob/main/docs/deployment.md): How the docs site is built and published to Cloudflare Pages.
- [Contributing](https://github.com/a3tai/mittsu/blob/main/docs/contributing.md): PR conventions, review checklist, how to use the Claude skills in .claude/skills/.
- [README](https://github.com/a3tai/mittsu/blob/main/README.md): project overview, why-another-library comparison, repo layout.
- [Roadmap](https://github.com/a3tai/mittsu/blob/main/ROADMAP.md): the full ~155-component catalog, what is shipped, queued, and planned.

## Components (94)

### Foundation

- [Button](https://mittsu.dev/components/button): Primary action element with primary / ghost / outline variants.
- [Input](https://mittsu.dev/components/input): Base text input primitive with leading / trailing slots.
- [SearchInput](https://mittsu.dev/components/search-input): Pill search field with magnifier + ⌘K hint + clear button.
- [Textarea](https://mittsu.dev/components/textarea): Multi-line text input with optional auto-resize.
- [Label](https://mittsu.dev/components/label): Caption / eyebrow for form fields.
- [Kbd](https://mittsu.dev/components/kbd): Keyboard shortcut hint, styled like a key cap.
- [Spinner](https://mittsu.dev/components/spinner): Indeterminate progress ring (sm / md / lg).
- [Card](https://mittsu.dev/components/card): Generic surface (flat / tinted variants).
- [Separator](https://mittsu.dev/components/separator): Horizontal or vertical rule, solid or dashed.
- [Skeleton](https://mittsu.dev/components/skeleton): Pulsing placeholder block for loading states.
- [Avatar](https://mittsu.dev/components/avatar): Circular user image with initials fallback.
- [Typography](https://mittsu.dev/components/typography): Preset typographic styles with tone overrides.
- [Field](https://mittsu.dev/components/field): Labeled form-field wrapper with auto-id and ARIA wiring.
- [Empty](https://mittsu.dev/components/empty): Empty-state placeholder with icon, title, and action.

### Layout

- [Container](https://mittsu.dev/components/container): Max-width content well with auto margins.
- [Stack](https://mittsu.dev/components/stack): Vertical flex column with token-driven gap.
- [VStack](https://mittsu.dev/components/vstack): Naming-symmetric twin of HStack — vertical flex.
- [HStack](https://mittsu.dev/components/hstack): Horizontal flex row with optional wrap.
- [Flex](https://mittsu.dev/components/flex): Generic flex container with all axes exposed.
- [Spacer](https://mittsu.dev/components/spacer): Flex helper that fills remaining space.
- [Center](https://mittsu.dev/components/center): Flex container that centers children on both axes.
- [Box](https://mittsu.dev/components/box): Generic div with token-driven padding and radius shortcuts.
- [Section](https://mittsu.dev/components/section): Semantic <section> with display-font title and subtitle.
- [AspectRatio](https://mittsu.dev/components/aspect-ratio): Locks a child block to a fixed width:height ratio.
- [ScrollArea](https://mittsu.dev/components/scroll-area): Overflow container with native-feel styled scrollbars.

### Shell

- [AppShell](https://mittsu.dev/components/app-shell): Full-window header / sidebar / main / footer scaffold.
- [Sidebar](https://mittsu.dev/components/sidebar): Collapsible side panel with header / body / footer slots.
- [Toolbar](https://mittsu.dev/components/toolbar): Horizontal action strip with macOS-flavored chrome.
- [PageHeader](https://mittsu.dev/components/page-header): Page-level header with title / eyebrow / actions.
- [PageBody](https://mittsu.dev/components/page-body): Page-level main content region.
- [PageFooter](https://mittsu.dev/components/page-footer): Page-level footer with bordered top.
- [Resizable](https://mittsu.dev/components/resizable): Two-pane container with a drag handle between them.
- [SplitView](https://mittsu.dev/components/split-view): Multi-pane container with hairline dividers (macOS).
- [Collapsible](https://mittsu.dev/components/collapsible): Toggle-visibility container built on bits-ui.
- [Accordion](https://mittsu.dev/components/accordion): Vertical stack of collapsible items.
- [DragHandle](https://mittsu.dev/components/drag-handle): Grip-dot indicator for resize / reorder targets.

### Display

- [Badge](https://mittsu.dev/components/badge): Pill-shaped status / count label.
- [Chip](https://mittsu.dev/components/chip): Toggleable filter pill with optional count.
- [Lamp](https://mittsu.dev/components/lamp): Colored status dot with halo (idle / running / warn / fail).
- [ProgressBar](https://mittsu.dev/components/progress-bar): Determinate or indeterminate progress bar.
- [Stat](https://mittsu.dev/components/stat): Single label + display-font value pair.
- [StatusRow](https://mittsu.dev/components/status-row): Compact summary card for an in-progress operation.
- [ProgressRing](https://mittsu.dev/components/progress-ring): Circular determinate progress with optional centered label.
- [Meter](https://mittsu.dev/components/meter): Discrete level indicator (battery / signal / score).
- [Sparkline](https://mittsu.dev/components/sparkline): Inline mini line chart with optional area fill.

### Form

- [Toggle](https://mittsu.dev/components/toggle): Pressable button with persistent on/off state.
- [ToggleGroup](https://mittsu.dev/components/toggle-group): Set of related Toggles bound to one value.
- [Switch](https://mittsu.dev/components/switch): Sliding on/off control (macOS-Settings shape).
- [Checkbox](https://mittsu.dev/components/checkbox): Boolean form control with optional label.
- [RadioGroup](https://mittsu.dev/components/radio-group): Single-select group of radio options.
- [Slider](https://mittsu.dev/components/slider): Single-thumb range input with token-driven chrome.
- [NumberInput](https://mittsu.dev/components/number-input): Numeric text field with ▲▼ Stepper.
- [PinInput](https://mittsu.dev/components/pin-input): Fixed-length OTP / verification code field.
- [PasswordInput](https://mittsu.dev/components/password-input): Input with show / hide eye toggle.
- [Select](https://mittsu.dev/components/select): Dropdown picker built on bits-ui.
- [NativeSelect](https://mittsu.dev/components/native-select): System <select> with our chrome.
- [Combobox](https://mittsu.dev/components/combobox): Typeahead select with filter-as-you-type.
- [Calendar](https://mittsu.dev/components/calendar): Month-grid date picker built on bits-ui + @internationalized/date.

### Overlay

- [Dialog](https://mittsu.dev/components/dialog): Modal overlay built on bits-ui.
- [AlertDialog](https://mittsu.dev/components/alert-dialog): Confirmation modal for destructive actions.
- [Popover](https://mittsu.dev/components/popover): Anchored floating panel.
- [Tooltip](https://mittsu.dev/components/tooltip): Hover-triggered short label.
- [Sheet](https://mittsu.dev/components/sheet): Slide-in panel from a screen edge.
- [Drawer](https://mittsu.dev/components/drawer): Bottom-anchored slide-up sheet.
- [DropdownMenu](https://mittsu.dev/components/dropdown-menu): Pop-up menu of actions (items-based API).
- [ContextMenu](https://mittsu.dev/components/context-menu): Right-click pop-up menu.
- [Command](https://mittsu.dev/components/command): Searchable ⌘K palette with keyboard nav.

### Feedback

- [Toast](https://mittsu.dev/components/toast): Sonner-style toast queue with imperative API.

### Navigation

- [NavItem](https://mittsu.dev/components/nav-item): Sidebar navigation row with dot / label / aside slots.
- [Tabs](https://mittsu.dev/components/tabs): Pill-style tab strip (vertical / horizontal) with optional counts.
- [SegmentedControl](https://mittsu.dev/components/segmented-control): Connected radio buttons sharing one rounded chassis.
- [Breadcrumb](https://mittsu.dev/components/breadcrumb): Hierarchical navigation trail.

### Data

- [Table](https://mittsu.dev/components/table): Data-driven HTML table with sortable columns.
- [List](https://mittsu.dev/components/list): Vertical row list with label / description.
- [VirtualList](https://mittsu.dev/components/virtual-list): Windowed list for large datasets (fixed height).
- [InfiniteScroll](https://mittsu.dev/components/infinite-scroll): IntersectionObserver load-more sentinel.
- [Timeline](https://mittsu.dev/components/timeline): Vertical chronological event list with markers.

### macOS

- [Notch](https://mittsu.dev/components/notch): Frosted-material section header with leading / trailing slots.
- [Stepper](https://mittsu.dev/components/stepper): ▲▼ connected button pair for increment / decrement.
- [TrafficLights](https://mittsu.dev/components/traffic-lights): Window controls (close / min / zoom).
- [TitleBar](https://mittsu.dev/components/title-bar): Drag region with centered title for app windows.
- [Inspector](https://mittsu.dev/components/inspector): Right-side property panel with sectioned rows.
- [SourceList](https://mittsu.dev/components/source-list): Finder-style sidebar list with icons + counts.
- [OutlineView](https://mittsu.dev/components/outline-view): Disclosure tree with chevron toggles.

### AI

- [AgentTimeline](https://mittsu.dev/components/agent-timeline): Vertical trace of a multi-step agent run — status markers per step with inline tool calls.
- [AIBadge](https://mittsu.dev/components/ai-badge): "AI" label for generated content, with an opt-in shimmer while streaming.
- [ChatMessage](https://mittsu.dev/components/chat-message): Role-tinted chat message row (assistant / user / tool / system) with avatar slot and metadata.
- [ChatStream](https://mittsu.dev/components/chat-stream): Streaming chat log container — role=log, bottom-anchored auto-follow, typing dots while busy.
- [CitationLink](https://mittsu.dev/components/citation-link): Inline source reference with a hover preview, as a superscript number or a titled chip.
- [DiffView](https://mittsu.dev/components/diff-view): Inline or side-by-side diff for AI edits, with derived line numbers and +/- stats.
- [PromptInput](https://mittsu.dev/components/prompt-input): Chat composer — auto-growing textarea, action slots, and a send button that flips to stop while busy.
- [ToolCallCard](https://mittsu.dev/components/tool-call-card): Display block for LLM tool invocations — status rows, diff stats, collapsible group, expandable results.
- [ToolResultCard](https://mittsu.dev/components/tool-result-card): Result block beneath a tool invocation — headed, scrollable, optionally collapsible, with an error tone.
- [TypingDots](https://mittsu.dev/components/typing-dots): Three-dot typing pulser with a grammar-aware or custom label.

## Charts (8)

### Cartesian

- [AreaChart](https://mittsu.dev/charts/area-chart): Area chart with monotone, linear, step, stacked, and expanded modes.
- [BarChart](https://mittsu.dev/charts/bar-chart): Grouped, stacked, horizontal, labeled, active, and negative categorical bars.
- [LineChart](https://mittsu.dev/charts/line-chart): Multi-series line chart with linear, monotone, step, dot, label, and area-fill variants.

### Circular

- [DonutChart](https://mittsu.dev/charts/donut-chart): Pie and donut chart with labels, active slices, center totals, and legends.

### Radial

- [RadarChart](https://mittsu.dev/charts/radar-chart): Radar chart with polygon or circular grids, filled areas, dots, and multiple series.
- [RadialChart](https://mittsu.dev/charts/radial-chart): Concentric radial progress rings and stacked gauge arcs.

### Primitives

- [ChartFrame](https://mittsu.dev/charts/chart-frame): Shared chart shell with title, description, metrics, legend, body, and footer slot.
- [ChartTooltip](https://mittsu.dev/charts/chart-tooltip): Shared tooltip content with label, marker, unit, icon, and total row variants.

## Optional

- [llms-full.txt](https://mittsu.dev/llms-full.txt): every doc concatenated as plain text for single-fetch ingestion.
- [GitHub repository](https://github.com/a3tai/mittsu): source, issues, contribution guide.
- [npm: @a3tai/mittsu](https://www.npmjs.com/package/@a3tai/mittsu): the CLI package.
- [npm: @a3tai/mittsu-svelte5](https://www.npmjs.com/package/@a3tai/mittsu-svelte5): Svelte 5 component sources used by the CLI registry.