Ravox KitOverlays
Sheet
A dialog that slides in from a screen edge: filters, order details, a cart, editing without leaving the list. Fixed header and footer, scrollable body, focus trapped and restored as in Dialog.
Settings
Examples
Cart with a fixed total at the bottom
Menu from the left
Notice from the top, free width
Installation
The command creates components/ui/sheet.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add sheetProps
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "right" | "left" | "top" | "bottom" | "right" | <SheetContent>: the edge the panel enters from. |
| width | "sm" | "md" | "lg" | string | "md" | On the sides: 320, 416 or 576px, or a CSS value ("30rem"). On mobile, a strip of the background is always left to tap and close. |
| closeOnOutsideClick / locked / hideClose | boolean | — | Same as on <DialogContent>. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | <Sheet>: controlled or uncontrolled. |
| Peças | SheetTrigger · Header · Title · Description · Body · Footer · Close | — | The same as Dialog, with their own names. useSheet() closes from inside. |