Drawer

The Drawer component is built on top of Corvu Drawer, which provides the accessible dialog, focus-management, and swipe primitive.

Installation

pnpm dlx shadcn@latest add @zaidan/drawer

npx shadcn@latest add @zaidan/drawer

yarn dlx shadcn@latest add @zaidan/drawer

bunx --bun shadcn@latest add @zaidan/drawer

Usage

1
import { Button } from "~/components/ui/button";
2
import {
3
  Drawer,
4
  DrawerClose,
5
  DrawerContent,
6
  DrawerDescription,
7
  DrawerFooter,
8
  DrawerHeader,
9
  DrawerTitle,
10
  DrawerTrigger,
11
} from "~/components/ui/drawer";

1
<Drawer>
2
  <DrawerTrigger as={Button} variant="outline">
3
    Open
4
  </DrawerTrigger>
5
  <DrawerContent>
6
    <DrawerHeader>
7
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
8
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
9
    </DrawerHeader>
10
    <div class="p-4">{/* Content here */}</div>
11
    <DrawerFooter>
12
      <Button>Submit</Button>
13
      <DrawerClose as={Button} variant="outline">
14
        Cancel
15
      </DrawerClose>
16
    </DrawerFooter>
17
  </DrawerContent>
18
</Drawer>

Composition

Use the following composition to build a Drawer:

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter

DrawerContent composes the portal and overlay from Corvu, and renders a swipe handle automatically when the drawer opens from the bottom. For lower-level control, DrawerOverlay is also exported.

Custom Sizes

A vertical drawer (top or bottom) sizes itself to its content. A side drawer (left or right) spans the width of its content plus padding.

To cap the height of a vertical drawer, scope h-* and max-h-* utilities to its side with the data-[side=*] variant on DrawerContent.

<DrawerContent class="data-[side=bottom]:h-64" />

To customize the width of a side drawer, scope w-* and max-w-* utilities the same way.

<DrawerContent class="data-[side=right]:w-96" />

When the same component renders in multiple directions, scope an override to a specific side using the data-[side=*] variant, or target descendants with group-data-[side=*]/drawer-content:.

<DrawerContent class="data-[side=top]:max-h-[50vh] data-[side=bottom]:max-h-[50vh]" />

To make a region of the drawer scrollable, make the scroll container a flex item.

<DrawerContent>
  <DrawerHeader>...</DrawerHeader>
  <div class="flex-1 overflow-y-auto p-4">{/* Scrollable content */}</div>
  <DrawerFooter>...</DrawerFooter>
</DrawerContent>

Data Attributes

The drawer sets data attributes on DrawerContent and DrawerOverlay you can target with variants such as data-[side=bottom]: directly, or group-data-[side=bottom]/drawer-content: on descendants.

Position

Use the side prop to set the side the drawer opens from. Available options are top, right, bottom, and left. Defaults to bottom.

Swipe Handle

DrawerContent renders a swipe handle automatically when the drawer opens from the bottom, the default side. Other sides render no handle.

Nested

Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer.

Non Modal

Set modal={false} to allow interaction with the rest of the page while the drawer is open. Combine with closeOnOutsidePointer={false} to prevent the drawer from closing on outside presses.

Snap Points

Use snapPoints to snap a drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport. Numbers greater than 1, or strings suffixed with px, are treated as pixel values. Snap points apply to vertical drawers (top and bottom).

Track the active snap point with the controlled activeSnapPoint and onActiveSnapPointChange props. While the drawer is transitioning between snap points, it carries a data-snapping attribute you can style with the data-snapping: variant.

Responsive

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

Props

The Drawer component uses Corvu's Drawer primitive under the hood. Here are the main props:

API Reference

See the Corvu Drawer API reference for primitive props, swipe behavior, focus management, and accessibility details.