Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Top

Top Drawer Notification Banner for React

A top drawer shaped as a banner, with an alert icon, a message, an Update Now button and a dismiss button.

Framework
UI library

A banner that slides down from the top: an alert icon, the message, Update Now and a dismiss button, on a lightly tinted strip. The title and description are the message itself, so the banner is announced as soon as it opens.

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 banner say?

DrawerTitle reads System Update Available and DrawerDescription reads A new version is available. Update now to get the latest features. Both sit beside the alert icon.

How is the banner colored?

With the info theme color: a light bg-info/4 fill, a border-info/32 bottom border and a text-info icon. Swap info for warning or destructive for other kinds of message.

How does the dismiss button work?

It's an icon-only DrawerClose with aria-label="Dismiss", so it closes the banner; the X is aria-hidden. Swiping up and Escape close it too.

What does Update Now do?

Nothing yet: it's a small outline Button with no handler. Start the update from it, then close the banner: Pass open to Drawer; onOpenChange receives the next boolean.

How does the banner open?

An outline button opens the drawer. Its text, Show Notification, is the accessible name. The Button goes in the render prop of DrawerTrigger. In an app you'd open it from code instead, by controlling open.

How does the banner open from the top?

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

All 22 drawer examples