Skip to content

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

Free

Empty with Description Empty State for Solid

An empty state with an inbox icon, the title Nothing here yet, and one sentence about creating an item.

UI library: Ark UI

An inbox icon in a small tile, the title Nothing here yet, and one sentence about creating the first item. There is no button.

Start here when a sentence is enough. Add a Button when the reader can fill the list in one step. In Solid, Ark UI only draws the message.

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">
        <InboxIcon aria-hidden="true" />
      </EmptyMedia>
      <EmptyTitle>Nothing here yet</EmptyTitle>
      <EmptyDescription>
        Get started by creating your first item.
      </EmptyDescription>
    </EmptyHeader>
  </Empty>

FAQ

Which parts does this empty state use?

EmptyHeader only. EmptyMedia with variant="icon" holds InboxIcon, EmptyTitle is "Nothing here yet", and EmptyDescription is "Get started by creating your first item."

How long is the description?

One sentence, in EmptyDescription, which is muted. There is no second paragraph and no EmptyContent.

How do I change the inbox icon?

Replace InboxIcon inside EmptyMedia. Keep variant="icon" for the same tile.

How do I add a button under the sentence?

Add EmptyContent after EmptyHeader and put a Button in it. This demo stops at the description.

Can the title be a real heading?

EmptyTitle is text. If this state belongs in the page outline, put a heading element in the header and keep the short message there.

What gets read after the title?

EmptyDescription, as the next text in the header. Hide InboxIcon with aria-hidden, because the title already says there is nothing here.

API Reference

Empty

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

All 22 empty state examples