Shadcn Empty
Browse 20 production-ready shadcn empty state components for zero-data screens, search results, onboarding, and error states. Covers analytics, bookmarks, tasks, automations, comments, products, search, payments, integrations, events, inbox, team members, notifications, and more: all with custom illustrations.
Basic empty state
Search empty state
Empty state with search input
Empty state with add button
Document empty state
Dashed upload empty state
Inbox empty state
Team members empty state
No notifications empty state
No data analytics empty state
Bookmarks empty state
Tasks empty state
No automations empty state with toggle illustration
Comments empty state with isometric board illustration
No products empty state with stacked cards and blur effect
Search empty state with stacked file cards illustration
No messages empty state with chat bubbles illustration
No payments empty state with credit card illustration
No integrations empty state with connected nodes illustration
No events empty state with calendar illustration
Shadcn Empty State: Zero-Data Screens with Illustrations
ReUI Empty is a custom shadcn component for rendering intentional empty states: screens where data is absent, searches return no results, or users have not yet taken an onboarding action. It structures the empty state as an icon or illustration, a title, a description, and an optional call-to-action.
Twenty components cover a broad range of product contexts: analytics no-data, bookmarks, tasks, automations with toggle illustration, comments with isometric board, products with stacked cards and blur, search with file cards, payments with credit card illustration, integrations with connected nodes, events with calendar, inbox, team members, notifications, dashed upload zones, and document upload.
The sections below cover the component structure, why empty states matter for retention, all twenty components, and composition with Button, Input, and Kbd.
What is Shadcn Empty?
ReUI Empty is a custom shadcn component for empty state screens. It renders a centered layout with an illustration or icon, a concise heading, a one-to-two sentence description, and a primary action button. The illustration slot accepts SVG, image, or any React node: ReUI ships inline SVG illustrations for each product context so no external image hosting is required.
Twenty components cover the most common empty state contexts in SaaS products. Each component is designed for a specific product screen: the payments empty state uses a credit card illustration, the integrations empty state shows connected node graphics, and the search empty state shows a stacked file card animation. All illustrations use Tailwind colors and CSS variables so they adapt to light and dark themes.
Why Use Shadcn Empty?
Empty states are one of the highest-leverage UX touchpoints in a product. A blank table with no message signals a bug; a well-designed empty state with a clear action converts first-time users into active ones. Analytics dashboards, inbox views, integration marketplaces, and task lists all need empty states that explain the absence and guide the user toward the action that fills the space.
ReUI Empty states include inline SVG illustrations specific to each product context rather than generic 'no data' icons: the difference between an empty state that users understand in two seconds and one that requires reading the description. Pair with Shadcn Button for the primary action and Shadcn Input Group for search-based empty states.
Shadcn Empty State Features
- Custom ReUI Component. ReUI Empty is a custom component not in base shadcn/ui. It provides a consistent centered layout with illustration, heading, description, and action slots for all zero-data screens.
- Context-Specific Illustrations. Twenty inline SVG illustrations match specific product contexts: analytics charts, credit card, connected nodes, calendar, stacked file cards, chat bubbles, isometric board, and more. No external image hosting required.
- Light and Dark Theme Illustrations. All illustrations use CSS variables from your Tailwind theme. Switch between light and dark mode and illustrations adapt their fill and stroke colors automatically.
- Dashed Upload Empty State. Dashed border dropzone variant doubles as an empty state and file upload trigger — used in document management and media library screens where upload is the primary action.
- Search Input and Keyboard Shortcut. Empty state with search input embeds a shadcn Input Group for immediate search entry. Kbd component shows keyboard shortcuts inline — useful for command palette trigger hints on empty screens.
- Add Button and Onboarding Actions. Empty states include a prominent shadcn Button as the primary action: 'Add task', 'Connect integration', 'Invite team member', 'Upload document'. The action label matches the product context of each illustration.
- Stacked Card and Blur Effects. Product and payments empty states use layered card or credit card illustrations with blur effects to preview what the filled state looks like — reducing uncertainty about what users are enabling.
- Grid and Inline Variants. Basic empty state renders in a centered full-page layout. Card and outline variants embed inside data grids, table bodies, or constrained panels where the empty state sits inline with other content.
Integrating With Other Components
Always pair Empty with a Shadcn Button as the primary action: 'Add task', 'Connect integration', 'Upload document'. The action should directly trigger the flow that fills the empty state.
Use Shadcn Input Group with a search icon for search-result empty states, and Shadcn Kbd to show keyboard shortcuts that trigger the action (⌘K for command palette, ⌘N for new item).
Embed empty states inside Shadcn Data Grid, Shadcn Table, or Shadcn Card containers for inline zero-data handling. Use Shadcn Skeleton while data loads: transition to the empty state only after a confirmed empty response from the API.