Components
Empty state
Says nothing is here, and what to do about it.
No transactions yet
Once a swap settles it will appear here.
No results for “datadog”
Check the spelling, or clear the filters to widen the search.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/empty-state.jsonNot a skeleton
A Skeleton promises something is coming. An empty state says nothing is here. Showing a skeleton for a genuinely empty list leaves the reader waiting for data that will never arrive.
"Nothing yet" and "no results" are different messages
The first is a state of the product — offer the action that creates the first one. The second is a state of the query — offer to clear the filter. Using one copy for both tells half your readers to do the wrong thing.
An empty state with no action is a dead end. Give it a way out unless there genuinely isn't one.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | The state, in a few words. |
| description | string | — | What would change it. |
| icon | ReactNode | — | Sits in a 40px sunken disc. |
| action | ReactNode | — | The way out. Usually a Button. |