Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Actions

Empty with Single Action Empty State for React

An empty projects state with a plus icon and a Create Project button.

Framework
UI library

The empty state with one clear next step. A plus icon in the icon tile, the title No projects yet, a short description, and a Create Project button in EmptyContent. Use it on any list the reader fills themselves: projects, tasks, documents.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is the Create Project button?

A default Button in EmptyContent, with a PlusIcon icon and the label Create Project. Nothing in the file creates a project. Add that on click.

Why does Plus appear twice?

EmptyMedia with variant="icon" holds one PlusIcon, and the button holds another. The tile marks the empty state. The button icon marks the action.

What do the title and description say?

EmptyTitle is "No projects yet". EmptyDescription is "Get started by creating your first project."

Where does the button sit?

EmptyContent follows EmptyHeader. The content is a centered column, so the button is under the description.

Which button variant is this?

None is set, so the button uses the default filled style. Set variant on that Button when you want outline or ghost.

What is the button's accessible name?

Create Project. Mark both PlusIcon icons aria-hidden so the name stays the label.

All 22 empty state examples