Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Simple Bottom Drawer for React

A bottom drawer with a title, a description, a short body and Submit and Cancel buttons.

Framework
UI library

The basic drawer: it slides up from the bottom with a drag bar, a header, a short body and a footer with Submit and Cancel. People close it by swiping down, pressing Escape, clicking the overlay or pressing Cancel. Start from this one and swap in your content.

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

Why does it open from the bottom?

Bottom is the default, so Drawer sets no direction. It slides up from the bottom edge, and a downward swipe closes it. Set swipeDirection on Drawer to up, left or right for the other edges; it names the swipe that closes the drawer.

What's inside the drawer?

DrawerHeader with the title Drawer Title and a description, a paragraph of muted text, and DrawerFooter with Submit and Cancel stacked full width.

How does Cancel close it?

Cancel is a DrawerClose, so pressing it dismisses the drawer. Submit is a plain Button with no handler. The Button goes in the render prop of DrawerClose.

Is there a drag bar?

Yes, a bar at the top edge shows the drawer can be dragged. showSwipeHandle on Drawer turns it on.

How does Open Drawer open it?

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

When should I use a Drawer instead of a Sheet?

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