Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty with Multiple Paragraphs Empty State for React

An empty calendar whose description is split into two paragraphs.

Framework
UI library

An empty calendar whose description has two parts: there are no events in the next 7 days, then a blank line, then a nudge to create one. The two sentences share one EmptyDescription, separated by line breaks. Use it when the message has a fact and a suggestion that read better apart.

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

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.

All 22 empty state examples