AG Design System

Component

Drawer

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

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/drawer

Usage

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

Composition

Button

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>

Variants & States

Supported variants, sizes, and interaction states for this component.

Placements

  • Right
  • Left
  • Bottom

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