Atoms

The token-driven core. Each tile shows one component in its expected states.

Included in the single kansho full pack. Components are not offered as separate installs.

Button — variants × sizes × states

primary / secondary / ghost / destructive

Primary / md

Primary / sm

Secondary

Ghost

Destructive

With leading icon

With trailing icon

Disabled

Icon button

Default

With tooltip

Active

Disabled

Input & textarea

Default

Populated

Disabled

Textarea

Toggle / checkbox

Toggle on

Toggle off (sm)

Toggle disabled

Checkbox

Tag / chip

Neutral

filesystem

Accent

claude-sonnet-4.6

Success

verified

Warning

awaiting input

Danger

scope denied

Removable

read /repo

Agent dot

Blue (sm)

Green (sm)

Amber (sm)

Red (sm)

Neutral (sm)

Blue (md)

Green (md)

Spinner

The kit-wide running / loading renderer (BrailleLoader). Colour is inherited — freezes on its densest frame under reduced motion.

sm (default)

Tinted (accent)

On a button

Labelled (role=status)

⠋

Badge

Dot

Numeric

Pill / success

complete

Pill / info

queued

Pill / warning

retrying

Pill / danger

failed

Tooltip

Top

Hover me

Right

Hover

Bottom

Hover

Left

Hover

Theme toggle

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Agent dot

components/ui/agent-dot.tsx

Badge

components/ui/badge.tsx

Button

components/ui/button.tsx

Icon button

components/ui/icon-button.tsx

Input

components/ui/input.tsx

Textarea

components/ui/textarea.tsx

Tooltip

components/ui/tooltip.tsx

Spinner

components/loaders/spinner.tsx

Theme toggle

components/shell/theme-toggle.tsx

Supporting sources

These installed helpers belong to components documented on this page. They do not increase the public component count.

components/ui/theme-toggle.tsx

Convenience re-export of the canonical ThemeToggle implementation and hook.

Component documentation

Agent dot

components/ui/agent-dot.tsx

Purpose

Displays a compact colour-coded agent identity marker.

Appropriate use

Use beside an agent name or avatar when colour is a secondary identity cue.

Example

components/ui/agent-dot.tsx has a representative live example in the "Agent dot" section on /components/atoms.

States

Tones are blue, green, amber, red, or neutral; sizes are sm or md.

API and props

AgentDot accepts tone, size, and className.

Dependencies

React and the Kansho cn utility.

Accessibility

Presentational only; pair it with visible text because colour alone does not identify an agent.

Limitations

It does not render a label, tooltip, or status semantics.

Source

Source: components/ui/agent-dot.tsx.

Full pack

components/ui/agent-dot.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Badge

components/ui/badge.tsx

Purpose

Renders a compact status, count, or categorical label.

Appropriate use

Use for short metadata that supplements nearby content rather than replacing a heading or control label.

Example

components/ui/badge.tsx has a representative live example in the "Badge" section on /components/atoms.

States

Variants are pill, numeric, or dot; tones span neutral, accent, success, warning, danger, and info with soft or solid emphasis.

API and props

Badge extends native span attributes with variant, tone, emphasis, className, and ref.

Dependencies

React, class-variance-authority, and the Kansho cn utility.

Accessibility

Adds no role by default; meaningful badge text is read in normal document order.

Limitations

Dot-only badges need adjacent text because their colour has no accessible meaning on its own.

Source

Source: components/ui/badge.tsx.

Full pack

components/ui/badge.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Button

components/ui/button.tsx

Purpose

Provides the primary general-purpose action control for Kansho interfaces.

Appropriate use

Use for user-triggered actions; choose a visual variant that matches the action hierarchy and risk.

Example

components/ui/button.tsx has a representative live example in the "Button — variants × sizes × states" section on /components/atoms.

States

Variants are primary, secondary, ghost, and destructive; sizes are xs, sm, md, and lg, with disabled and loading states.

API and props

Button extends native button attributes with variant, size, asChild, loading, className, and ref.

Dependencies

React, Radix Slot, class-variance-authority, Spinner, and the Kansho cn utility.

Accessibility

Uses native button semantics, sets aria-busy while loading, and preserves visible focus styling.

Limitations

asChild delegates semantics to its child; callers must supply a genuinely interactive element.

Source

Source: components/ui/button.tsx.

Full pack

components/ui/button.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Icon button

components/ui/icon-button.tsx

Purpose

Renders a compact icon-only action button.

Appropriate use

Use in toolbars and dense controls when a familiar icon has an unambiguous accessible label.

Example

components/ui/icon-button.tsx has a representative live example in the "Icon button" section on /components/atoms.

States

Supports native enabled and disabled states with one fixed visual treatment and geometry.

API and props

IconButton extends native button attributes with a required aria-label, className, and ref.

Dependencies

React and the Kansho cn utility.

Accessibility

Requires aria-label at the type level, uses native button semantics, and exposes focus-visible styling.

Limitations

The label is not visually rendered; unfamiliar actions should use text or a tooltip as well.

Source

Source: components/ui/icon-button.tsx.

Full pack

components/ui/icon-button.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Input

components/ui/input.tsx

Purpose

Applies Kansho styling to a native single-line input.

Appropriate use

Use inside Field or with an explicit label for ordinary text, email, number, and other native input types.

Example

components/ui/input.tsx has a representative live example in the "Input & textarea" section on /components/atoms.

States

Supports native input states including empty, populated, placeholder, focus, read-only, invalid, and disabled.

API and props

Input extends native input attributes with className and ref.

Dependencies

React and the Kansho cn utility.

Accessibility

Retains native input semantics and focus behaviour; the caller must provide a label and connect validation text.

Limitations

It does not render label, description, or error text by itself; use Field for that composition.

Source

Source: components/ui/input.tsx.

Full pack

components/ui/input.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Textarea

components/ui/textarea.tsx

Purpose

Applies Kansho styling to a native multiline textarea.

Appropriate use

Use inside Field or with an explicit label for free-form multi-line input.

Example

components/ui/textarea.tsx has a representative live example in the "Input & textarea" section on /components/atoms.

States

Supports native textarea states including empty, populated, placeholder, focus, read-only, invalid, and disabled.

API and props

Textarea extends native textarea attributes with className and ref.

Dependencies

React and the Kansho cn utility.

Accessibility

Retains native textarea semantics and focus behaviour; callers must provide a label and connect validation text.

Limitations

Resize is disabled by the component, and it does not render label or error text by itself.

Source

Source: components/ui/textarea.tsx.

Full pack

components/ui/textarea.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

components/ui/tooltip.tsx

Spinner

components/loaders/spinner.tsx

Purpose

Provides the kit-wide indeterminate loading indicator with consistent sizing.

Appropriate use

Use inside controls and status rows while work is running and no measurable progress is available.

Example

components/loaders/spinner.tsx has a representative live example in the "Spinner" section on /components/atoms.

States

Supports xs, sm, and md sizes, paused animation, inherited colour, and decorative or labelled status modes.

API and props

Spinner accepts size, label, paused, and className.

Dependencies

BrailleLoader and the Kansho cn utility.

Accessibility

Without label it is decorative; with label it becomes a polite status region. BrailleLoader supplies reduced-motion behaviour.

Limitations

It is indeterminate and does not display progress, elapsed time, or completion.

Source

Source: components/loaders/spinner.tsx.

Full pack

components/loaders/spinner.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.

Theme toggle

components/shell/theme-toggle.tsx

Purpose

Switches among the supported theme preference modes and exposes theme state through a hook.

Appropriate use

Use in application chrome when users should control light, dark, or system-derived appearance.

Example

components/shell/theme-toggle.tsx has a representative live example in the "Theme toggle" section on /components/atoms.

States

Supports light, dark, and system preferences, a resolved light or dark theme, persisted preference, and the next-theme toggle action.

API and props

ThemeToggle accepts className; useTheme returns theme, resolvedTheme, setTheme, and toggle.

Dependencies

React, Lucide icons, browser matchMedia and localStorage APIs, and the Kansho cn utility.

Accessibility

Uses a native button whose accessible name describes the next theme action and hides decorative sun, moon, and monitor icons.

Limitations

The standalone external-store hook reads browser APIs directly; server rendering cannot know the persisted or system preference before hydration.

Source

Source: components/shell/theme-toggle.tsx.

Full pack

components/shell/theme-toggle.tsx is documented at /components/atoms and installs only through the single Kansho full pack; no individual component install is offered.