Drawer

Side panel that slides in from any edge. Built on Radix Dialog — includes focus trap, Escape key, and backdrop dismiss. Use for settings, filters, detail views, and mobile navigation.

Anatomy

<Drawer>
  <DrawerTrigger />
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle />
      <DrawerDescription />
    </DrawerHeader>
    <DrawerBody />
    <DrawerFooter>
      <DrawerClose />
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

Sides

Detail view (no footer)

DrawerContent props

side= 'right'

'left' | 'right' | 'top' | 'bottom'

Which edge the drawer slides in from.

children*

ReactNode

Drawer content.

className

string

Additional classes on the panel.

Prop	Type	Default	Description
side	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Which edge the drawer slides in from.
children*	ReactNode	—	Drawer content.
className	string	—	Additional classes on the panel.

PreviousDialog NextDropdown