Drawer
ARIA
RTL
The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
Based on Headless UI.
Anatomy
<Drawer> <Drawer.Panel>...</Drawer.Panel> </Drawer.Backdrop> </Drawer>
Default
Positions
With Backdrop
With Close
Drawer
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for custom styles |
| open | boolean | Yes | false | Whether or not the Drawer is opened |
| setOpen | (value: boolean) => void | Yes | - | Sets open state of the Drawer |
Drawer.Panel
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for custom styles |
| position | top | bottom | start | end | No | end | The Drawer positions on screen |