# dashi

> A React design system with semantic light/dark tokens, accessible shadcn/Base UI controls, Tailwind v4, and editable component source for distinct products.

Dashi distributes copied source through a shadcn registry, not an npm design-system runtime. Read the receiving project's instructions and adoption decision before changing dependencies or replacing its theme. Products own their identity, content, navigation, and workflows. Preserve accessible semantics, visible focus, persistent errors, and existing content during in-place work.

Configure @dashi against this website's /r/{name}.json in components.json. The adoption guide documents the public reference origin; honor the receiving project's explicitly configured registry. Review shadcn view, add --dry-run, or add --diff before applying changes. A namespace alone does not install components or restyle stock shadcn controls. Registry JSON includes the actual source and dependencies; links below are machine-readable JSON, not HTML pages.

- Interface: `'Atkinson Hyperlegible Next Variable', system-ui, sans-serif`.
- Data and code: `'Atkinson Hyperlegible Mono', ui-monospace, monospace`.
- Reference-site wordmark: `'Chillax', sans-serif`, weight 500, size `1.5rem`. The wordmark is lowercase **dashi**. Chillax is reference-site identity only, not part of the installable theme.

## Start here

- [Agent adoption guide](/llms/using-dashi.md): Canonical skill; installation, source ownership, updates, layout, and verification.
- [Design contract](/llms/product.md): Mandatory invariants, adjustable defaults, and product-owned boundaries.
- [Typography](/llms/typography.md): Actual font families, fallbacks, and the reference-only wordmark.

## Source registry

- [Registry catalogue](/r/registry.json): Available items and dependency metadata.
- [Dashi theme](/r/dashi-theme.json): Atkinson typography, semantic light/dark tokens, primitive scales, and reduced motion. Generated from the website's canonical stylesheet.
- [Dashi layout primitives](/r/dashi-primitives.json): Optional typed Box, Text, and responsive Grid using the same Tailwind theme as the controls.
- [Button](/r/button.json): Shadcn/Base UI Button with Dashi pill shape, minimum 40px targets, and stable accessible loading feedback.
- [Command](/r/command.json): cmdk command list and Base UI CommandDialog palette with Dashi 40px items, grouped results, shortcut hints, and focus return.
- [Loader](/r/loader.json): Dashi dot loader: a lit dot and fading tail circling a 3×3 grid, in currentColor, with a frozen trail under reduced motion. Includes LoadingState for initial page or section content.
- [Input](/r/input.json): Shadcn input with Dashi boundaries, 40px minimum target, and 16px input text.
- [Checkbox](/r/checkbox.json): Labeled controlled shadcn/Base UI checkbox with keyboard access and Dashi targets.
- [Switch](/r/switch.json): Labeled controlled shadcn/Base UI switch with Dashi thumb, rail, focus, and hit target.
- [Badge](/r/badge.json): Shadcn/CVA badge with Dashi neutral, success, and warning tones.
- [Notice](/r/notice.json): Persistent shadcn Alert-derived feedback with text, icons, and Dashi semantic tones.
- [Field](/r/field.json): Shadcn Field-derived native grouping with connected labels, descriptions, and persistent errors.
- [Scroll Area](/r/scroll-area.json): Shadcn/Base UI native scroll area with subtle idle-hidden scrollbars, keyboard focus, and forced-colors visibility.
- [Editable settings](/r/settings.json): The actual reference form: validation, first-invalid-field focus, preserved edits, discard, browser-local persistence, and honest storage errors.
- [Searchable collection](/r/collection.json): The actual reference collection: search, status filters, visible records, result counts, and clearable empty results.
- [Layout recipes](/r/layouts.json): Reading, responsive workspace, and horizontally scrollable comparison compositions from the reference site.

## Optional

- [Provenance and licenses](/llms/provenance.md): Upstream source notices, font rights, and identity ownership.