Drawer
A panel that slides in from the right side of the screen.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
open | boolean | β | |
onOpenChange | (open: boolean) => void | β | β |
Related Components
DrawerTriggerDrawerClose
Usage
<Drawer>
<DrawerTrigger asChild>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Drawer Title</DrawerTitle>
<DrawerDescription>Drawer description text.</DrawerDescription>
</DrawerHeader>
<p>Drawer body content goes here.</p>
<DrawerFooter>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
</DrawerClose>
<Button>Save</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>