Shadcn Drawer

The shadcn drawer is a panel that slides in from an edge. Drag the handle, swipe it closed, or tap the overlay. Use it for mobile action sheets, filters, and short forms that should not cover the whole viewport.

Usage

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

direction is top, right, bottom, or left. Default is bottom — that is the only side that shows the grab handle.

Composition

Scrollable Content

Keep the header and footer pinned. Put overflow-y-auto on the middle region, not on DrawerContent.

Sides

direction on Drawer. Bottom and top cap at 50vh here so the page behind still shows.

Responsive Dialog

Same form, two shells. Dialog from md up, drawer on small screens. Share open so the trigger does not remount.

Nested

A drawer opening another drawer. Dismiss the inner one first.

Non-modal

The page stays interactive. Use it when they still need the content behind.

Snap Points

Stop at 30%, 50%, 90%. They drag between stops.

Swipe Handle

A visible grabber at the top. Mobile expects it.

RTL

Wrap with DirectionProvider and dir="rtl". Copy, numbers, and the chart axis follow the reading direction.

API

DrawerTrigger

DrawerClose takes render the same way. DrawerTitle is announced when the panel opens.

Keyboard

Swipe the handle or the overlay to dismiss. dismissible={false} turns both the swipe and Escape off.

Notes

On a laptop, pair this with a Dialog. A bottom sheet on a wide viewport is a small strip of form.

With other components

Questions

Related