Feedback & Status
Sheet
A sheet is a panel that slides in from the edge of the screen, overlaying the current content.
A sheet is a panel that slides in from the edge of the screen, overlaying the current content.
Size#
The size prop sets the width for left and right sheets, and the height for top and bottom sheets.
Component props#
| Name | Type | Description |
|---|---|---|
| side | string | "left" | "right" | "top" | "bottom" (default: "right") |
| size | string | number | Width (left/right) or height (top/bottom) of the sheet |
| isOpen | boolean | Controlled open state |
| defaultOpen | boolean | Initial open state. Used when the sheet is not wrapped in a DialogTrigger |
| onOpenChange | (open: boolean) => void | Called when the open state changes |
| showCloseButton | boolean | Renders a close button in the top-right corner. Defaults to true unless a SheetHeader is present, so only one close button is ever rendered |
Parts#
| Name | Type | Description |
|---|---|---|
| SheetTrigger | component | Opens the sheet |
| SheetClose | component | Closes the sheet |
| SheetTitle | component | Accessible title, rendered as a Heading |
| SheetDescription | component | Accessible description, rendered as muted Text |
SheetHeader props#
| Name | Type | Description |
|---|---|---|
| title | ReactNode | Title displayed at the top of the sheet |
| showClose | boolean | Shows the close button (default: true) |
| children | ReactNode | Additional content below the title |