The empty state is the first screen every new account sees and the last one anybody designs. That order is backwards: a populated dashboard is a screen for someone who already stayed, and the empty one is the screen that decides whether they do.
77 components on 21st carry the empty-state tag. They cover three genuinely different situations that get treated as one.
First use: nothing here yet
The most important and the most often skipped. Nothing has gone wrong; the reader has simply arrived before the data.
Empty State is the shadcn-shaped base, and Interactive Empty State by Remco is the modular version. Empty by Jesus Lopez is the minimal one, and Empty Testimonial by 0xUrvish is the same idea inside a specific section.
Four things belong here, and most implementations ship one. Say what this screen will hold once it is full, so the reader knows what they are building toward. Give the action that fills it, as the primary button, not a link in a corner. Show an example if you can - a sample row, a demo project - because seeing the shape is worth more than describing it. And never show a sad face with the word "empty" and nothing else, which tells the reader something is wrong when nothing is.
No results: you filtered everything out
Different situation, different copy. The data exists, the query excluded it.
The rules invert. Repeat the query and the filters, so the reader can see what happened. Offer to clear them, as a real control. Suggest the nearest thing that does exist rather than a dead end. And never make this look like the first-use state, because "add your first item" is nonsense when the reader has four hundred items and a typo.
Error: something broke
Page Not Found by Le Thanh, not found 2 and Not Found Page by Efferd, and ghost 404 page by KainXu are the 404 shapes.
A 404 should do three things: say plainly that the address does not exist, offer search and the main navigation, and return the actual 404 status code. That last one matters more than the illustration: a "not found" page served with a 200 is a soft 404, and it is how thousands of dead URLs stay in a search index claiming to be real pages.
The states around empty
Two neighbours worth designing at the same time, because they share the same box.
Loading is not empty. A screen that shows the empty state for a second before the data arrives tells every returning reader their account was wiped. Render the skeleton until you know, which the loading guide covers.
Permission is not empty. "No projects" and "you do not have access to these projects" are different sentences, and showing the first for the second sends people to support.
Writing the copy
The part that carries this pattern, and it is three sentences at most.
Name the thing, in the reader's words. "No invoices yet", not "No records found". Say what the action does rather than what it is called: "Create your first invoice" beats "New". And drop the apology, because nothing has gone wrong.
One more, easy to get wrong in a product with an agent in it: if the empty state offers to generate something, say what it will produce and make it undoable. An empty screen that fills itself with content the reader did not choose is worse than an empty screen.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Card, Button and the typography underneath | No empty state component |
| An illustration set | The picture, when the state deserves one | A picture is not the missing part; the copy is |
| 21st | First-use states, 404 pages and section-specific empties | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for an empty state, get the previews inline, and let the agent write the file.
Browse empty state components →
Frequently asked
- What belongs in an empty state?
- Four things: what the screen will hold once it is full, the action that fills it as the primary button, an example if you can show one, and no apology, because nothing has gone wrong. A sad face beside the word empty tells the reader something is broken when they have simply arrived before the data.
- Is a no-results state the same as an empty state?
- No, and treating them the same is the usual bug. First use means nothing exists yet, so the action is create. No results means the data exists and the query excluded it, so repeat the query, offer to clear the filters, and suggest the nearest thing that does exist. Add your first item is nonsense to someone with four hundred items and a typo.
- Should a 404 page return a 404 status?
- Yes, and it matters more than the illustration. A not-found page served with a 200 is a soft 404, which is how dead URLs stay in a search index claiming to be real pages. The page itself needs three things: a plain statement that the address does not exist, search, and the main navigation.
- Why does my empty state flash before data loads?
- Because the screen renders empty while the request is still in flight, which tells a returning reader their account was wiped. Render a skeleton until you know the answer, and keep a third state for permission: no projects and you do not have access to these projects are different sentences.