Tab strip
A sandbox file-browser strip. Tabs carry a dirty dot, agent badge, and close button. The close button is quiet chrome — hidden at rest, revealed on row hover or keyboard focus.
Included in the single kansho full pack. Components are not offered as separate installs.
Interactive — close & new
Try tabbing through — close buttons reveal on focusOverflow scroll
Read-only — no close, no new
Static preview — tab selection is not wiredIncluded components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Scroll fade
components/ui/scroll-fade.tsxComponent documentation
Scroll fade
components/ui/scroll-fade.tsxPurpose
Adds edge fades to a horizontal scroll region only when content overflows.
Appropriate use
Use for tab strips and compact horizontal lists where overflow should remain discoverable.
Example
components/ui/scroll-fade.tsx has a representative live example in the "Overflow scroll" section on /components/tab-strip.
States
Supports fitting and overflowing content, start and end fade visibility, and custom fade background colour.
API and props
ScrollFade accepts label, className, contentClassName, fadeToClassName, and children.
Dependencies
React and the Kansho cn utility.
Accessibility
When overflowing, the region becomes keyboard-focusable with role region and the required label; fades are hidden from assistive technology.
Limitations
It observes element size in the browser and is intended only for horizontal scrolling.
Source
Source: components/ui/scroll-fade.tsx.
Full pack
components/ui/scroll-fade.tsx is documented at /components/tab-strip and installs only through the single Kansho full pack; no individual component install is offered.
Tab Strip
components/sandbox/tab-strip.tsxPurpose
Provides an editor-style tab list with dirty indicators, badges, close controls, and optional new-tab action.
Appropriate use
Use above a matching tabpanel when the host owns active tabs and file lifecycle.
Example
components/sandbox/tab-strip.tsx has a representative live example in the "Interactive — close & new" section on /components/tab-strip.
States
Tabs may be active, inactive, dirty, badged, closable, overflowed, or read-only; badges support neutral, accent, warning, danger, and success tones.
API and props
TabStrip accepts tabs, active, onSelect, onClose, onNew, and className; SandboxTab supplies id, label, path, dirty, and optional badge.
Dependencies
Direct imports are React, Lucide icons, Tooltip, and cn.
Accessibility
Uses a labelled tablist and roving tab focus with Left/Right/Home/End; tabs expose selected and controls relationships, dirty state is named, and close/new buttons are labelled.
Limitations
The consumer must render matching tabpanel ids, remove or add tabs after callbacks, and choose the next active tab after close.
Source
Source: components/sandbox/tab-strip.tsx.
Full pack
components/sandbox/tab-strip.tsx is documented at /components/tab-strip and installs only through the single Kansho full pack; no individual component install is offered.