Skip to content

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

Free

Bottom Drawer No Scale Background for Ark UI

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, Ark 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>
  <DrawerTrigger asChild>
    <Button variant="outline">Open (No Scaling)</Button>
  </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. The page only scales when your layout is wrapped in DrawerProvider, which draws the indent behind open drawers.

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. DrawerContent draws it by default; showBar={false} hides it.

How does the trigger open the drawer?

An outline button opens the drawer. Its text, Open (No Scaling), is the accessible name. DrawerTrigger takes asChild and merges onto the one Button inside it.

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 asChild. The rest is on the Drawer page.

Button

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

All 22 drawer examples