Component

Drawer

Slide-in panel from the right, left, or bottom edge. Built on Base UI Dialog for accessibility.

Usage

Use drawers for secondary panels, detail views, and forms that need more vertical space than a dialog.

Playground

Preview

Configure

Which edge the drawer slides in from

Code

<Drawer>
  <DrawerTrigger render={<Button variant="outline">Open Drawer</Button>} />
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Panel Settings</DrawerTitle>
        <DrawerClose />
      </DrawerHeader>
      <div className="flex-1 overflow-auto p-4">
        <p className="text-sm text-muted-foreground">Drawer content goes here.</p>
      </div>
      <DrawerFooter>
        <DrawerClose render={<Button variant="ghost" size="sm">Close</Button>} />
        <Button size="sm">Save</Button>
      </DrawerFooter>
    </DrawerContent>
  </DrawerPortal>
</Drawer>

Do

  • Use right-side drawers for detail panels and forms
  • Use bottom drawers on mobile for sheet-style interactions

Don't

  • Don't use a drawer when a simple tooltip or popover would suffice
  • Don't open a drawer from within a dialog