Drawer

Drawer is a bottom-anchored panel built on vaul. It slides up from the bottom edge, shows a drag handle, and (by default) scales the page behind it back to signal depth. Reach for it on touch-first layouts when you want a draggable, dismissible surface for a quick task or set of controls.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: drawer.tsx

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
  Button,
} from "@beacon/design-system";

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="mx-auto w-full max-w-sm">
      <DrawerHeader>
        <DrawerTitle>Move Goal</DrawerTitle>
        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose asChild>
          <Button variant="outline">Cancel</Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>

Parts

Part	Role
`Drawer`	Root container. Accepts `shouldScaleBackground` (defaults to `true`) plus the vaul root props such as `open` and `onOpenChange`.
`DrawerTrigger`	Element that opens the drawer. Use `asChild` to wrap your own button.
`DrawerContent`	The sliding bottom panel. Renders the overlay and a drag handle automatically.
`DrawerHeader`	Layout wrapper for the title and description.
`DrawerTitle`	Accessible heading announced to screen readers.
`DrawerDescription`	Supporting text under the title.
`DrawerFooter`	Action stack pinned to the bottom of the panel.
`DrawerClose`	Dismisses the drawer. Use `asChild` to make a custom element close it.
`DrawerPortal`	Renders content into a portal at the document root.
`DrawerOverlay`	The backdrop scrim. Included automatically by `DrawerContent`.

When to use

Touch-first layouts where a draggable, dismissible bottom surface feels native.
Quick tasks or control sets that benefit from the scaled-back background depth cue.

Do not use a Drawer for desktop side panels anchored to the left or right edge: use a Sheet with the matching side instead. For a centered, page-blocking task use a Dialog.