Skip to content

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

Free

Empty with Multiple Paragraphs Empty State for Vue

An empty calendar titled No upcoming events, with the description split into two short paragraphs.

UI library: Ark UI

A calendar icon and the title No upcoming events. One line says nothing is scheduled for the next 7 days, and the next line says to create an event. There is no button.

Use it when the message is a fact plus a suggestion. If creating the event is the point, add a Button. In Vue, Ark UI does not split the copy 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>
    <EmptyMedia variant="icon"><CalendarIcon aria-hidden="true" /></EmptyMedia>
    <EmptyTitle>No upcoming events</EmptyTitle>
    <EmptyDescription>
      You don't have any events scheduled for the next 7 days.<br /><br />Create a new event to get started with your calendar.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

FAQ

How are the two paragraphs separated?

One EmptyDescription contains both sentences, with two br elements between them. The first says there are no events for the next 7 days. The second says to create a new event.

What icon is on the calendar empty state?

CalendarIcon in EmptyMedia with variant="icon". The title is "No upcoming events".

How much space is between the sentences?

Two br elements, so there is a blank line between them. The description stays one element.

Is Create a new event a button?

No. It is the second sentence of the description. There is no EmptyContent and no Button in this file.

Can I use two description parts instead?

Yes. EmptyHeader is a column, so a second EmptyDescription stacks under the first. This demo uses the breaks inside one description.

How is the broken text read?

A screen reader reads the title, then the description text in order. A br is a line break, not a new heading. Hide CalendarIcon with aria-hidden.

API Reference

Empty

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

All 22 empty state examples