Drawer

Stable

A panel that slides in from the edge of the screen.

Examples

Directions

tsx
<Drawer direction="right">
  <DrawerTrigger asChild><Button>Open Right</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Configure your workspace.</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Neon Variant

tsx
<Drawer variant="neon" direction="right">...</Drawer>

Glass Variant

tsx
<Drawer variant="glass" direction="bottom">...</Drawer>

API Reference

PropertyDescriptionTypeDefault
variantVisual style propagated to DrawerContent."default" | "neon" | "glass"-
directionEdge of the screen the drawer slides from."top" | "bottom" | "left" | "right""right"