Drawer

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Drawer component is a panel that slides in from any edge of the screen — bottom, top, left, or right. It is ideal for mobile-friendly bottom sheets, side navigation panels, confirmation dialogs, and forms that need more space than a modal dialog.

Bottom Sheet

Right Panel

Left Sidebar

With Form

Direction Variants

Properties

Drawer

Property	Type	Default	Description
open	boolean	-	Controlled open state of the drawer.
onOpenChange	(open: boolean) => void	-	Callback fired when the open state changes.
children	ReactNode	-	Must include DrawerTrigger and DrawerContent.

DrawerContent

Property	Type	Default	Description
direction	"top" | "bottom" | "left" | "right"	"bottom"	Edge from which the drawer slides in.
className	string	-	Additional CSS classes.
children	ReactNode	-	Drawer body, typically DrawerHeader, content, and DrawerFooter.

DrawerTrigger

Property	Type	Default	Description
asChild	boolean	false	Merges props onto the immediate child element instead of rendering a wrapper.
children	ReactNode	-	The element that opens the drawer on click.

DrawerClose

Property	Type	Default	Description
asChild	boolean	false	Merges props onto the immediate child element.
children	ReactNode	-	The element that closes the drawer on click.

DrawerHeader

Property	Type	Default	Description
className	string	-	Additional CSS classes.
children	ReactNode	-	Typically DrawerTitle and DrawerDescription.

DrawerFooter

Property	Type	Default	Description
className	string	-	Additional CSS classes.
children	ReactNode	-	Action buttons, typically DrawerClose and a primary action.

DrawerTitle

Property	Type	Default	Description
className	string	-	Additional CSS classes.
children	ReactNode	-	Title text for the drawer.

DrawerDescription

Property	Type	Default	Description
className	string	-	Additional CSS classes.
children	ReactNode	-	Supplementary description text.

Features

Direction Control

The direction prop on DrawerContent determines which screen edge the panel slides from. All four directions — top, bottom, left, and right — are supported.

Controlled State

The Drawer component is fully controlled via open and onOpenChange, giving you precise control over open/close logic including confirmation dialogs or form validation before closing.

Portal Rendering

DrawerPortal renders the content outside the normal DOM tree, preventing clipping issues with overflow: hidden parent elements.

Common Use Cases

• Bottom sheets — mobile-style action sheets and order summaries
• Side navigation — collapsible left or right navigation drawers
• Detail panels — contextual information panels that slide in alongside content
• Forms — data entry forms with more space than a dialog
• Confirmations — actions that require confirmation before proceeding