Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Data

No Notifications Empty State for React

An empty notifications list with a bell icon and an all-caught-up message, with no action.

Framework
UI library

Nothing to see here is good news for notifications. A bell icon, the title No notifications and a cheerful all-caught-up line make the empty list read as done, not broken, and there is no button because there is nothing to do. Use it in notification centers and activity feeds.

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 does the empty notification list say?

EmptyTitle is "No notifications". EmptyDescription is "You're all caught up! We'll notify you when something new happens."

How is the bell shown?

BellIcon is inside EmptyMedia with variant="icon". There is no class on the icon itself, so the icon tile sizes it.

Where is the action?

There is no EmptyContent and no button. The block is EmptyHeader only: media, title, and description.

How do I add a settings link?

Add EmptyContent after the header and put a Button or an anchor in it. This file leaves that part out.

Is No notifications a heading?

EmptyTitle renders as text, not a heading element. Put a real heading in the header if this state should appear in the page outline.

Should the bell be hidden from assistive tech?

Yes. The title already says there are no notifications. Set aria-hidden on BellIcon.

All 22 empty state examples