Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Right

Simple Right Drawer for React

A drawer that slides in from the right with a title, a description, a short body and Confirm and Cancel buttons.

Framework
UI library

The basic right drawer: a panel slides in from the right with a header, a line of text and Confirm and Cancel in the footer. People can swipe it back to the right to close it. Use it for details and settings next to the content they belong to.

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 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's inside the panel?

DrawerHeader with Drawer Title and This drawer slides in from the right side, one paragraph, and DrawerFooter with Confirm and Cancel.

What do Confirm and Cancel do?

Cancel is a DrawerClose, so it dismisses the drawer. Confirm is a plain Button with no handler. 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 Right Drawer, is the accessible name. The Button goes in the render prop of DrawerTrigger.

When should I use a right 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