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
An empty state for trading and fintech dashboards: a quiet dotted field with one line of copy and one call to action.
View componentAlert Stack
A stacked notification panel for price alerts, margin warnings and order fills that fans open on hover and settles as you dismiss.
View componentOnboarding Checklist
An onboarding checklist for developer and fintech products, with steps that check off and a progress bar counting what is done.
View componentNew Items Pill
A live trade feed that holds your place while new rows arrive and counts them into a pill, for tapes, alerts and activity feeds.
View componentNotification Inbox
A notification inbox for SaaS and trading apps, with unread markers that clear as you read and a mark all as read action.
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