Question 1

What is the Empty component?

Accepted Answer

shadcn.io's Empty is the block you show when there is nothing to list: an empty inbox, a search with no results, a new account with no projects. It is made of parts: EmptyHeader holds an optional EmptyMedia (an icon, in a tile or on its own), EmptyTitle and EmptyDescription, and EmptyContent holds actions such as buttons, a link or an input. Each example in this gallery is one small file built from those parts.

Question 2

Are these empty state examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Why does an empty state matter?

Accepted Answer

A blank area looks like something failed. An empty state says what is missing and, when the reader can fix it, how: create the first project, clear the filters, try other keywords. New accounts see it first, so it often decides whether people take their first step.

Question 4

When should I show an empty state instead of a skeleton or a spinner?

Accepted Answer

A skeleton or a spinner while the data is loading; an empty state once it has loaded and there is nothing. Keep loading and empty as separate states, so readers never see No results while the request is still running.

Question 5

Which example fits a search with no results?

Accepted Answer

The search variants. No matches found repeats the query and offers View All Items, the filter ones offer Clear Filters, and Try different keywords suggests other words and browsing categories. Show the state once the search has settled, not on every keystroke.

Question 6

When should an empty state have a button?

Accepted Answer

When the reader can fill the space in one step: Create Project, Upload Files, New Message. Leave it out when there is nothing to do, as in No notifications, or when the data arrives on its own, as in the empty chart. Use two buttons when there are two real ways in, and stack them in narrow panels.

Question 7

Should I use an icon tile or a large icon?

Accepted Answer

EmptyMedia with the icon variant draws a small tile and sizes the icon for you; it suits lists, panels and widgets. Without the variant, the icon is drawn as you size it, like the size-16 folder and chart icons, for empty states that fill a page. The text-only example has no media at all.

Question 8

How do I install an empty state example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Empty component, and Button or Input when the example uses them.

Question 9

How do I show the empty state only when there is no data?

Accepted Answer

Check the data where you render the list: render the list when it has items and the Empty block when it doesn't. Keep the same container, so the layout doesn't jump when the first item arrives.

Question 10

How do I hide an action from people who can't use it?

Accepted Answer

Render the button only for people allowed to act, and give the others a description instead, such as Ask an admin to create the first project.

Question 11

What are empty state examples built on?

Accepted Answer

shadcn.io's Empty, with Button and Input where an example has actions, styled with Tailwind CSS and Lucide icons. In React the Button and Input are built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 12

Are empty state examples accessible?

Accepted Answer

Yes. The title and description are plain text read in order, the icons are hidden from screen readers because the title already says what is missing, and actions are real buttons and links. When the state appears after a search, announce it with a polite live region around the results.

Question 13

Do the examples work with server rendering?

Accepted Answer

Yes. Empty states are static markup with no state of their own, so they render on the server. Wire the buttons to your own handlers or links.

Empty State Examples

Empty with Input Action

Empty with Link Action

Empty with Multiple Actions

Empty with Single Action

Empty with Stacked Actions

Empty Chart

No Files

No Messages

No Notifications

Empty Table

Clear Filters Suggestion

No Filter Results

More component examples

Progress

Skeleton

Sonner

Spinner

Alert

Field

Form

Hover Card

Empty State examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every empty state example. One prompt away.