Status card
High-signal at-a-glance card for the state of a single system: orchestrator, region, queue, or service. Carries a tone dot, label, value, and a one-line detail. Warning and danger tones apply a faint surface tint.
Included in the single kansho full pack. Components are not offered as separate installs.
Tone variants
Warning and danger receive a faint tone-tinted surfaceAll replicas in sync.
Region eu-west · 1ms heartbeat
Throughput within target.
Approaching daily cap (84%).
3 failed retries in last 5m.
Card variants
Standard card separation.
Hairline border in both modes.
Muted fill, no border.
Component documentation
Status Card
components/surfaces/status-card.tsxPurpose
Summarizes a labelled status value with tone, detail, icon, and optional trailing content.
Appropriate use
Use for dashboard health or operational summaries that need stronger hierarchy than an inline badge.
Example
components/surfaces/status-card.tsx has a representative live example in the "Tone variants" section on /components/status-card.
States
Supports neutral, live, warning, danger, and success tones plus surface, muted, and outline variants with optional icon, detail, and trailing content.
API and props
StatusCard accepts label, value, detail, tone, icon, trailing, variant, and className.
Dependencies
React, Lucide icon types, shared tone tokens, and the Kansho cn utility.
Accessibility
Communicates label and value in visible text and hides the decorative tone dot from assistive technology.
Limitations
It does not add live-region semantics or infer operational severity; callers must choose a correct tone and provide updates elsewhere when announcements are needed.
Source
Source: components/surfaces/status-card.tsx.
Full pack
components/surfaces/status-card.tsx is documented at /components/status-card and installs only through the single Kansho full pack; no individual component install is offered.