Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty with Single Action Empty State for Solid

An empty projects state titled No projects yet, with a plus icon and a Create Project button.

UI library: Ark UI

A plus icon, the title No projects yet, and a line about creating the first project. Create Project sits under the text, with a plus.

Use it when the reader fills the list themselves. If the list is still loading, show a Skeleton instead. In Solid, Ark UI does not create the project.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <PlusIcon aria-hidden="true" />
      </EmptyMedia>
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>
        Get started by creating your first project.
      </EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button>
        <PlusIcon aria-hidden="true" data-icon="inline-start" />
        Create Project
      </Button>
    </EmptyContent>
  </Empty>

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.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

Button

No extra props in this demo. The rest is on the Button page.

All 22 empty state examples