Empty state and status components for React
The screens a product shows when there is nothing to show. An empty state that tells someone what to do next, alerts that stack without covering the interface, a checklist for onboarding, and a pill that announces new items in a feed. They are the states that decide whether a product feels finished.
5 components, installable with the shadcn CLI.
Empty State
A dotted field, one line, one quiet action. The emptiness is the design.
View componentAlert Stack
A collapsed notification deck that fans open on hover and re-settles on dismiss.
View componentOnboarding Checklist
A setup checklist with a drawing check and a done/total bar.
View componentNew Items Pill
A live tape that stops pushing the list down once you scroll off the top, counting arrivals into a pill.
View componentInbox
A notification inbox where unread dots dissolve on read and mark-all clears the column.
View component
Questions
- What belongs in an empty state?
- One sentence saying why the screen is empty, and one action that fills it. Anything more and people read instead of acting.
- Can I use these with shadcn/ui?
- Yes, they install with the shadcn CLI and follow the same token conventions, so they sit next to your existing components without restyling.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide