Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Bottom Drawer No Scale Background for React

A bottom drawer that leaves the page behind it in place instead of scaling it back.

Framework
UI library

Some drawers push the page behind them back, scaling it down as they open. This one doesn't: the page stays as it is and only the overlay dims it, which suits pages where the layout shouldn't move, such as a dashboard or a form.

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 doesn't the page scale back?

Scaling is opt-in, and this drawer doesn't opt in, so nothing on the page moves. Nothing in this drawer moves the page; the overlay is the only effect behind it.

When should the background stay still?

When the page behind matters while the drawer is open, when its layout is complex enough that scaling looks jumpy, or when people get motion sick. A still page is the calmer default.

What's inside the drawer?

A header with No Background Scaling and its description, and one paragraph explaining the effect. There's no footer: people close it by swiping down, pressing Escape or clicking the overlay.

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 the trigger open the drawer?

An outline button opens the drawer. Its text, Open (No Scaling), 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 No Background Scaling, with The background doesn't scale when this drawer opens as the description.

All 22 drawer examples