Empty state
The family of empty / zero-data states across pages, panels, and rows. Quiet by default; can signal success, warning, or danger when state is meaningful.
Included in the single kansho full pack. Components are not offered as separate installs.
Page
Hero densityNothing running yet
Spin up a mission to send your fleet to work. Drafts and templates stay tucked away under Missions › Drafts.
Standout
Dark hero panel (design.md §18) — an invitation, not an absence. Reads correctly in both themes.Nothing running yet
Spin up a mission to send your fleet to work.
Nothing running yet
Spin up a mission to send your fleet to work.
Panel
Mid-canvas densityInbox is clear
No approvals pending.
All systems quiet
No incidents in the last 24 hours.
Awaiting input
One mission needs a scope decision from you.
Connection lost
We can't reach the orchestrator. Retrying in 8s.
Row
Inline densityNo steps yet
The plan will populate as the run reasons.
Custom illustration
Override with any nodeNo branches yet
Branch this session to explore an alternative without losing the current run.
Component documentation
Empty State
components/shell/empty-state.tsxPurpose
Explains an empty or unavailable state and presents up to two recovery actions.
Appropriate use
Use where a collection or view has no content and the user needs a clear reason or next step.
Example
components/shell/empty-state.tsx has a representative live example in the "Page" section on /components/empty-state.
States
Supports page, panel, or row density, neutral, success, warning, or danger tone, default or standout variants, icon or illustration, and optional primary and secondary actions.
API and props
EmptyState accepts icon, title, description, primary, secondary, density, tone, variant, illustration, and className.
Dependencies
React, Lucide icon types, Button, and the Kansho cn utility.
Accessibility
Keeps title, description, and action labels visible and uses native buttons for recovery actions; supplied decorative artwork should remain non-essential.
Limitations
It supports at most two built-in actions and does not infer whether the state is first-use, no-results, error, or permissions-related.
Source
Source: components/shell/empty-state.tsx.
Full pack
components/shell/empty-state.tsx is documented at /components/empty-state and installs only through the single Kansho full pack; no individual component install is offered.