Skip to content

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

Free

Bottom Drawer No Scale Background for Solid

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

UI library: Ark UI

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 Solid, Ark UI still closes this panel on a swipe.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Drawer>
    <DrawerTrigger asChild={props => <Button {...props()} variant="outline">Open (No Scaling)</Button>} />
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>No Background Scaling</DrawerTitle>
        <DrawerDescription>
          The background doesn&apos

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. asChild on DrawerTrigger receives props: spread them onto the button.

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

Button

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

All 22 drawer examples