Drawer
.mdA side panel that springs in from the left or right over a blurred scrim; drag it toward its edge, press Escape or click outside to dismiss.
drawersheetside paneloverlaydraggesturedialogcart
Installation
$npx shadcn@latest add @geturui/drawer
Usage
usage.tsx
1import { Drawer } from "@/components/ui/drawer";
2import { Button } from "@/components/ui/button";
3
4export function Filters() {
5 return (
6 <Drawer
7 side="left"
8 title="Filters"
9 description="Narrow the catalog."
10 trigger={<Button variant="secondary">Filters</Button>}
11 footer={<Button block>Apply</Button>}
12 >
13 {/* filter controls */}
14 </Drawer>
15 );
16}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | — | Panel heading; also labels the dialog. |
description | ReactNode | — | Supporting line under the title; describes the dialog. |
children | ReactNode | — | Scrollable body content. |
footer | ReactNode | — | Sticky footer, e.g. actions or a total. |
side | "left" | "right" | "right" | Edge the panel slides from. |
trigger | ReactElement | — | Element that opens the drawer. Receives onClick, aria-expanded and aria-haspopup. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the drawer opens or closes. |
width | number | 400 | Panel width in px, clamped to the viewport. |
dragToDismiss | boolean | true | Allow dragging (or flinging) the panel toward its edge to close. |
className | string | — | Classes for the panel. |
Accessibility
- The panel is a role="dialog" with aria-modal, labelled by the title and described by the description.
- Focus moves into the panel on open (to the first [data-autofocus] element if present) and returns to the previous element on close.
- Tab and Shift+Tab wrap inside the panel; Escape and the close button dismiss it, so dragging is never required.
- Body scroll is locked while open, with scrollbar compensation to avoid layout shift.
- Reduced motion swaps the spring for a short slide and disables drag.