Handle the states nobody designs
Every tutorial builds the version where the data arrives. Real apps spend a surprising amount of time in the other four states, and skipping them is the single clearest difference between a side project and a product. Short path, disproportionate payoff.
Take all 6 at once
npx hoverlab add skeleton-list empty-state-cta error-state-retry not-found-404 toast-stack confirm-dialogOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-states.jsonThis path is a published registry item — one name that pulls in all 6 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
What the screen shows while the data is in flight. Shaped like the content it is replacing, so nothing jumps when the real rows land.
- 2
Zero results, on purpose. The important part is the button — an empty state that only apologises leaves people stuck.
- 3
The request failed. Say so in a sentence and give them the retry button, rather than leaving the skeleton spinning forever.
- 4
A URL that no longer resolves — a deleted record, an old link in someone’s email. Every app gets these; most send you to a default page with no way back.
- 5
The small confirmations and failures that do not deserve a whole screen. Stacked, so three fast actions do not fight over the same corner.
- 6
The state before a destructive one. Cheaper to add now than the support conversation about the thing somebody deleted.
When you are done
Wire each one to a real request. If you only take two from this list, take the empty state and the error state.