EmptyStates
v1.0.18Updated 19 Oct 2026Empty-state page templates — empty inbox, no results, no data, error, no access and empty cart. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).
Preview
Live · 18 stories▸Why this is recommendedempty-stateno-datano-resultsplaceholder+2
EmptyStates — inbox.
- ✓Empty-state screens
- ✓Zero-data fallbacks
- i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
- Inbox, no-results, no-data, error and no-access layouts
- Empty cart / archive / onboarding-checklist variants
- Self-contained — no required props
- ✕Inline empty rows (use EmptyState component)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override (copy-paste block, baked-in content)
—labelsOverride every built-in string and aria-label (i18n). Merged over DEFAULT_EMPTY_STATES_LABELS (78 English keys); every template in the file accepts it. The rendered DEFAULTS are English — page templates used to hardcode their copy, which no consumer could translate or ship. MCP feedback fb_ba2ec12f.
—