Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Scrollable Bottom Drawer for React

A bottom drawer with terms and conditions that scroll inside a capped body.

Framework
UI library

Long text in a bottom drawer. The body is capped at max-h-[60vh] with overflow-y-auto, so six paragraphs of terms scroll inside it while the title stays in view. Scrolling the text doesn't drag the drawer; dragging the bar does.

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

Which part scrolls?

The body under the header: max-h-[60vh] overflow-y-auto caps it at 60% of the screen's height and scrolls what's left.

Does scrolling the text drag the drawer?

A swipe on the text scrolls the body first. Drag the bar or the header to move the drawer itself.

Where do the paragraphs come from?

A static array of six placeholder paragraphs, each with an id for its key. Replace it with your terms.

How do I add an Accept button?

Add a DrawerFooter after the body with Accept and a DrawerClose for Decline. The footer stays below the scrolling text.

How does View Terms open the drawer?

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

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 Terms and Conditions, with Please read our terms and conditions carefully as the description. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger.

All 22 drawer examples