Ravox KitOverlays
Drawer
The sheet that slides up from the bottom on mobile: handle, drag to close (a quick flick also counts) and optional height stops. On desktop it is centered at the bottom. Underneath it is the same <dialog> as Dialog.
Settings
Toggles
Examples
Chat with stops (half screen and full screen)
Quick actions for an order
Controlled, opened by another action
Installation
The command creates components/ui/drawer.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add drawerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| snapPoints | number[] | — | <DrawerContent>: stops as a fraction of the screen height (e.g. [0.5, 0.92]). Without snapPoints, the height is that of the content. |
| defaultSnapPoint | number | 0 | Index of the stop where the drawer opens. |
| onSnapPointChange | (index: number) => void | — | Notifies when the drawer stops at another point. |
| hideClose | boolean | false | Hides the X in the corner (handle, Esc and tapping the backdrop still close it). |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | <Drawer>: controlled or not. |
| data-no-drag | atributo | — | On any element: dragging doesn't start on it. The body, fields and buttons are already excluded from dragging. |
| Peças | DrawerTrigger · Header · Title · Description · Body · Footer · Close | — | The same as in Dialog. With snapPoints, the handle becomes a button: Enter toggles and the arrows move up and down between stops. |