Right (default)
Left
Sub-components
| Component | Props | Description |
|---|---|---|
| Drawer | direction, open, onOpenChange | Root container (wraps vaul) |
| Drawer.Trigger | asChild, children | Element that opens the drawer |
| Drawer.Content | className, children | The slide-in panel |
| Drawer.Header | className, children | Top section inside the panel |
| Drawer.Footer | className, children | Bottom section inside the panel |
| Drawer.Title | className, children | Accessible title for the drawer |
| Drawer.Description | className, children | Accessible description |
| Drawer.Close | asChild, children | Element that closes the drawer |
Usage
<Drawer direction="right">
<Drawer.Trigger asChild>
<Button>Open</Button>
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Title</Drawer.Title>
</Drawer.Header>
<div className="p-4">Content here</div>
<Drawer.Footer>
<Drawer.Close asChild>
<Button variant="outline">Close</Button>
</Drawer.Close>
</Drawer.Footer>
</Drawer.Content>
</Drawer>