Drawer

Installation

pnpm dlx shadcn@latest add @paneui/drawer

Usage

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

<Drawer side="right">
  <DrawerTrigger render={<Button variant="secondary" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Agent settings</DrawerTitle>
    </DrawerHeader>
    <DrawerBody>…</DrawerBody>
  </DrawerContent>
</Drawer>

Composition

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

Examples

Controlled

Without Close Button

Scrolling Body

RTL

Motion

The panel exits on a stiffer spring than it enters. With reduced motion the panel and backdrop only fade.

Keyboard

Focus moves into the drawer and is trapped there; Esc or a backdrop press closes it.

API Reference

Built on the Dialog primitive. Only the props this library adds or changes are listed; everything else passes through.

Root. Holds the open state and the side. Also accepts every prop of Dialog.Root.

side= "right": "left" | "right"; Edge the panel slides in from.
open: boolean; Controlled open state.
defaultOpen= false: boolean; Open on first render.
onOpenChange: (open: boolean, details) => void; Called when the drawer opens or closes.

Prop	Type	Default	Description
side	"left" \| "right"	"right"	Edge the panel slides in from.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Open on first render.
onOpenChange	(open: boolean, details) => void	—	Called when the drawer opens or closes.

DrawerTrigger

Also accepts every prop of Dialog.Trigger.

DrawerContent

The floating panel (up to 384px wide, 8px from the edges) with its backdrop and portal. Also accepts every prop of Dialog.Popup.

showClose= true: boolean; Show the round × button in the top-right corner.

Prop	Type	Default	Description
showClose	boolean	true	Show the round × button in the top-right corner.

data-side: left or right.

Data attribute	Description
data-side	`left` or `right`.

DrawerHeader

Padded top area; leaves room on the right for the close button. Also accepts every prop of div.

DrawerBody

The scrolling area (overscroll-contain). Also accepts every prop of div.

DrawerFooter

Action row pinned to the bottom of the panel. Also accepts every prop of div.

DrawerTitle

Also accepts every prop of Dialog.Title.

DrawerDescription

Also accepts every prop of Dialog.Description.

DrawerClose

Also accepts every prop of Dialog.Close.