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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

First run screens and card sections that add the first record, invite a team or connect a data source
Search with no matches, a not found page with a search field, or a prompt shown before the first search
Caught up notices with nothing left to act on, such as inbox zero or no new notifications

When not to use

A complete first run page with finished copy, artwork and actions, ready to drop in: use the Empty State blocks
A screen shown while a fetch is still running and no result is known yet: use the Spinner component
A square container for one glyph in a list row, feature card or settings item: use the Icon Tile component

Agent notes

Adding border to Empty draws a dashed outline, since every style sets a dashed border style on it; add border-solid for a solid line
EmptyMedia with variant icon puts the glyph in a small muted tile; the default variant has no fill, so drawings go there
Empty takes flex-1 and centers its children, so in a flex column with a set height it fills the free space

Markdownhttps://web.dev.reui.io/components/empty.md

MCPget_component("empty")

Installnpx shadcn@latest add empty

Full index for agents:llms.txtReUI MCP setup

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.

20 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 20 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.

20 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. 20 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.

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.

Empty State Blocks in ReUI Pro

The free examples above pair with 14 production ready empty state blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Empty State (14 blocks)Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.

Browse all Application blocks

Frequently Asked Questions

What is a shadcn empty state used for?

Empty states communicate to users that a list, table, dashboard, or feed has no content: and tell them what to do next. They appear when users have no data yet (onboarding), search returns no results, filters eliminate all items, or a feature has not been activated.

Why use an illustration instead of just text?

Illustrations make empty states scannable and memorable. A credit card illustration on the payments empty state communicates context without reading the heading. Users process images faster than text, and a context-specific illustration signals intentional design rather than an error.

Do the illustrations support dark mode?

Yes. All illustrations use CSS variables from your Tailwind and shadcn theme. Switching to dark mode changes illustration colors automatically because fills and strokes reference the same color tokens as your UI components.

How do I use the dashed upload empty state?

The dashed upload empty state wraps a file input in a dropzone with a dashed border. It serves as both the empty state for a document or media library and the upload trigger. On file selection, transition to the filled state with file list or image grid.

Can I embed an empty state inside a data grid?

Yes. Use the card or basic variant without the full-page centering. Pass it as the table body content when the row count is zero. The outline variant has reduced padding suitable for inline placement inside a bordered table container.

Are there empty states for specific SaaS product contexts?

Yes: that is the defining feature of ReUI Empty. Components match specific screens: analytics (no data chart outline), payments (credit card illustration), integrations (connected nodes), inbox (chat bubbles), notifications (bell), team members (avatars), automations (toggle), and more.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.