Sheet
A panel from the edge of the window.
The four sides
Right by default. Bottom is the one that reads well on a phone.
A dialog that arrives from a side instead of the middle, for something with a shape of its own: a form, a filter panel, a navigation menu on a phone. It behaves like a dialog in every other way — focus trapped, Escape closes, the page behind frozen.
Installation
npx philcn@latest add sheetThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| Sheet.open | boolean | Controlled: whether it is showing. |
| Sheet.onOpenChange | ((open: boolean) => void) | Called when it opens or closes. |
| Sheet.modal | boolean | Modal freezes the page behind it. Off, and the page stays usable. |
| SheetContent.side | "bottom" | "left" | "right" | "top" | Which edge it comes from. |
| SheetContent.showCloseButton | boolean | The cross in the corner. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.