Drawer

A panel that slides in from the edge of the screen.

Overview

Drawer follows the same composition model as Dialog: pass one element to DrawerTrigger, then place content in DrawerContent. Use side to pick the edge. On phones the panel spans the full width up to max-w-sm; on larger screens it caps at sm:max-w-md.

Use drawers for shopping filters, account panels, and activity detail — not for short confirmations (prefer Dialog for those).

Preview

Customize

Side

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add drawer

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export function FilterDrawer() {
  return (
    <Drawer>
      <DrawerTrigger>
        <Button variant="outline">Filters</Button>
      </DrawerTrigger>
      <DrawerContent side="right">
        <DrawerHeader>
          <DrawerTitle>Filters</DrawerTitle>
          <DrawerDescription>
            Narrow the product list without leaving the page.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose>
            <Button variant="outline" size="sm">
              Cancel
            </Button>
          </DrawerClose>
          <Button size="sm">Apply filters</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

Examples

Shopping filters

A product listing opens a side panel for brand, size, price, and shipping.

Running shoes

248 results · Men

Account panel

A left-side drawer for profile settings.

Order activity

Shipment updates with a delivery preference toggle.

In practice

A storefront product list keeps filters in a drawer so shoppers refine brand, size, and price without leaving the grid.

Running shoes

248 results · Men

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`open`	boolean	—	Controlled open state.
`defaultOpen`	boolean	—	Initial open state when uncontrolled.
`onOpenChange`	(open: boolean) => void	—	Called when the drawer opens or closes.
`side`	"left" \| "right" \| "top" \| "bottom"	`"right"`	On DrawerContent, sets the slide-in edge and layout.
`className`	string	—	Merged onto DrawerContent and layout sections.

Accessibility

The panel uses role="dialog" and aria-modal="true".
Escape closes the top-most drawer.
Focus moves into the drawer and returns to the trigger on close.
Background scrolling is locked while the drawer is open.