Skip to content

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

Free

Empty without Icon Empty State for Vue

A text-only empty state titled No content available, with a short description and no icon or button.

UI library: Ark UI

The title No content available and one sentence asking people to check back later. There is no icon and no button.

Use it in a compact panel where an icon would be noise. If the empty state is the whole page, add an icon with Empty. In Vue, Ark UI does not pick an icon for you.

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>
    <EmptyTitle>No content available</EmptyTitle>
    <EmptyDescription>
      There's nothing to display at the moment. Please check back later.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

FAQ

Which parts does the text-only empty state use?

EmptyHeader with EmptyTitle "No content available" and EmptyDescription "There's nothing to display at the moment. Please check back later." There is no EmptyMedia.

How do I add an icon later?

Put EmptyMedia first inside EmptyHeader, with variant="icon" and an icon. This file leaves that part out, so the header is the two text lines.

How do the title and description differ?

EmptyTitle uses the heading font. EmptyDescription is muted. Both are centered, and the header caps the line length at max-w-sm.

Is there a button?

No. There is no EmptyContent. Add one after the header when the state needs an action.

Is the title a heading element?

EmptyTitle is text. Add a real heading in the header if this state should be in the page outline.

What does a screen reader hear?

The title, then the description. With no icon, there is no graphic to hide.

API Reference

Empty

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

All 22 empty state examples