What an empty list means and what to do next: default, positive (all done) and filtered tones.
EmptyState never says just "No data". It names why the space is empty and offers the next step as an action. compact fits inside a Table.
Installation
npx shadcn@latest add KezLahd/rime/empty-stateAlso installs: base, icon.
Usage
import { EmptyState } from "@/components/ui";
<EmptyState title="No projects yet" description="Create a project to start tracking work." action={<Button href="/projects/new">New project</Button>} />Examples
Tones
No projects yet
Create a project to start tracking work.
All caught up
Nothing is waiting for review.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
EmptyState
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | ReactNode | ||
| descriptionRequired | ReactNode | What to do next. Required: a bare "No data" is not an empty state. | |
| action | ReactNode | ||
| secondaryAction | ReactNode | ||
| icon | ReactNode | ||
| tone | "default" | "positive" | "filtered" | "default" | default = nothing here yet. positive = nothing needs you ("All caught up"), a green tile. filtered = the filters exclude everything; offer to clear them. |
| compact | boolean | Tighter spacing for inside tables and dropdowns. | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-gradient-soft | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line-brand | tokens.css | … |
| --neutral-fill | tokens.css | … |
| --neutral-line | tokens.css | … |
| --r-md | tokens.css | … |
| --success-fill | tokens.css | … |
| --success-ink | tokens.css | … |
| --success-line | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- The icon is decorative; the title and description are plain text, so put the empty state under the heading of the list it belongs to.
Do and don't
Do
- Use tone="filtered" with a clear-filters action when filters emptied the list.
Don't
- Never ship a bare "No data".
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open empty-state.md