Preview
Drawer is closed during SSR; pinning, focus containment, and dismissal are demonstrated only while open. This server-rendered page does not imitate client behavior. Open the live playground.
Usage
Drawer usage<Drawer id="details" title="Deploy details" side="right">Details</Drawer>API
Drawer APIDrawerProps
| prop | type | notes |
|---|---|---|
| id | string | Document-unique id — openers target it via `onOpenDialog(id)`. |
| title | string | |
| children? | RemixNode | |
| actions? | RemixNode | Footer row; `<form method="dialog">` buttons close natively. |
| side? | 'right' | 'left' | 'bottom' | Edge the panel pins to (default 'right'). 'bottom' is the sheet. |
| width? | string | Panel width for left/right (default '380px'; clamped). Ignored for bottom. |
| closeLabel? | string | Accessible name for the × control (i18n; default 'Close'). |
| mix? | MixInput |