Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Top

Simple Top Drawer for React

A drawer that slides down from the top with a title, a description, a short body and a Close button.

Framework
UI library

The basic top drawer: it slides down from the top edge with a header, a line of text and a Close button, and an upward swipe sends it back. Use it for search, announcements and quick actions that belong at the top of the screen.

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 does this drawer 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.

What's inside the drawer?

DrawerHeader with Top Drawer and This drawer slides down from the top, one paragraph, and DrawerFooter with Close.

How does Close work?

It's a DrawerClose, so it dismisses the drawer. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger. The Button goes in the render prop of DrawerClose.

Is there a drag bar?

No. A side or top drawer still follows a swipe, but it doesn't draw the bar. The bar stays off unless Drawer sets showSwipeHandle.

How does the trigger open it?

An outline button opens the drawer. Its text, Open Top Drawer, is the accessible name. The Button goes in the render prop of DrawerTrigger.

When should I use a top Drawer?

When the content reads best from the top down: a search bar, a banner, a row of actions. Pick a Drawer when people should be able to drag the panel, which feels natural on touch screens. A Sheet slides in from an edge without the drag and suits desktop side panels; a Dialog is centered.

All 22 drawer examples