Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Right

Right Drawer Notifications for React

A right drawer listing notifications, with an unread dot on new ones and a Mark all as read button.

Framework
UI library

A notifications panel in a right drawer, opened from a bell with a count Badge. Each notification is a button with a dot, the title, a line of detail and the time; unread ones get a primary dot and a medium weight. The list scrolls on its own.

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 is the bell button labeled?

It's icon-only, so aria-label gives the name and the count: Notifications, 5 unread. The badge is aria-hidden, so the count isn't read twice.

How are unread notifications marked?

A primary dot, a medium-weight title and a visually hidden Unread before the title. Read ones get a muted dot and regular weight, so the state isn't color alone.

Why is each notification a button?

So people can open it with a click or the keyboard. The rows have no handler yet: open the related page from each one.

Does Mark all as read clear the dots?

It's a DrawerClose, so it closes the drawer; it doesn't change the data. Keep the notifications in state and set them all read when it's pressed.

How does the drawer open from the right?

swipeDirection="right" on Drawer puts it on the right edge. The prop names the swipe that closes the drawer, so right docks it on the right; leave it out for a bottom drawer.

What does the drawer announce?

DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading. It reads Notifications, with You have 5 unread notifications as the description.

All 22 drawer examples