Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Bottom Drawer No Scale Background for React

A bottom drawer titled No Background Scaling whose copy says the page stays put and only the overlay dims.

Open (No Scaling) slides up a panel titled No Background Scaling. The copy says the page stays in place and only the overlay dims.

Use it on a dashboard or a form whose layout should not move. If the note should stay in the page, use an Alert. In React, Base UI still closes this panel on a swipe.

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

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open (No Scaling)
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>No Background Scaling</DrawerTitle>
      <DrawerDescription>
        The background doesn&apos;t scale when this drawer opens.
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p className="text-muted-foreground text-sm">
        Some drawers scale the page behind them back as they open. This one
        leaves it static: only the overlay dims it.
      </p>
    </div>
  </DrawerContent>
</Drawer>

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.

API Reference

Drawer

Sets showSwipeHandle. The rest is on the Drawer page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 drawer examples