Dashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.
npx shadcn@latest add @minidev/empty-stateCode Empty states, 404 pages and error states for React
Free empty state and error components for React and Tailwind CSS: empty workspace, empty table and search results, 404 not found, server error, offline state and retry patterns. MIT.
9 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Empty states are the first thing a new user sees and error states are the thing they remember. Each one here says what happened, what to do next and gives one clear action.
Empty Workspace
blockAn empty workspace screen with a no projects empty state and new project action, plus follow up buttons to import from Git or invite teammates.
npx shadcn@latest add @minidev/empty-workspaceCode Empty table placeholder with a dashed border, a No data yet title, helper text and an optional button to create the first row. For React tables.
npx shadcn@latest add @minidev/empty-tableCode No results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.
npx shadcn@latest add @minidev/empty-searchCode A 404 state with the error code, a Page not found heading, a short explanation and Go home and Open gallery buttons, centered in a card. Built in React.
npx shadcn@latest add @minidev/not-found-stateCode 500 error state card with a danger outline, a short explanation, and Retry and Copy request id buttons so users can recover or reach support with context.
npx shadcn@latest add @minidev/server-error-stateCode React error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.
npx shadcn@latest add @minidev/error-stateCode An offline status card with a warning dot, a You are offline heading, a note on what still works and a Retry connection button. For PWA and sync apps.
npx shadcn@latest add @minidev/offline-stateCode Frequently asked questions
What makes a good empty state?
A one-line explanation, the primary action to fill it, and nothing else. Illustrations are optional; a clear sentence and a button do the job.