components
Drawer
An edge sheet built on Radix Dialog. Touch-first: it defaults to a bottom sheet with a drag affordance, and can slide in from the left or right edge as a full-height panel. The overlay dims the page and closes the drawer.
Bottom
The default. A full-width sheet that slides up from the bottom edge, with a grab handle and rounded top corners.
Left and right
Side panels slide in from an edge as a full-height column, about min(86vw, 360px) wide, with the inner corner rounded.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | none | Required. The drawer heading (Radix Title). |
| description | string | none | Optional supporting text (Radix Description). |
| side | "bottom" | "left" | "right" | "bottom" | Which edge the sheet slides from. |
| trigger | ReactNode | none | Element that opens the drawer, rendered asChild. |
| footer | ReactNode | none | Action row, right-aligned. |
| open | boolean | none | Controlled open state. |
| onOpenChange | (o: boolean) => void | none | Open-state handler. |