Skip to content

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

Free

Empty with Multiple Paragraphs Empty State for React

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

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 React, Base UI does not split the copy for you.

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

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