Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Data

No Messages Empty State for React

An empty inbox with a message icon and a New Message button.

Framework
UI library

An empty inbox that invites the first message. A message icon, the title No messages yet and a one-line description sit above a New Message button with a plus icon. Use it in chat, direct messages and support inboxes.

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

What is on the New Message button?

A default Button in EmptyContent, with a PlusIcon icon before the label New Message. The file does not open a composer. Add that in the button's click handler.

What icon is above the title?

MessageSquareIcon in EmptyMedia with variant="icon". The plus on the button is a second icon.

What does the empty inbox say?

EmptyTitle is "No messages yet". EmptyDescription says to start a conversation by sending the first message.

Which parts make up the header?

EmptyHeader holds EmptyMedia, then EmptyTitle, then EmptyDescription. EmptyContent is the next sibling and holds the button.

How do I add a second action?

Put another Button next to New Message and wrap them in a div with flex gap-2 inside EmptyContent.

What name does the button get?

New Message, from its text. Mark PlusIcon and MessageSquareIcon aria-hidden so the name stays that label.

All 22 empty state examples