Sheet
Slide-in panel anchored to any edge. The mobile-friendly alternative to Dialog for navigation drawers, detail panels, and contextual actions.
Right (default)
Left (navigation)
Bottom (mobile)
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| Sheet | — | — | Root. Manages open state (controlled or uncontrolled). |
| Sheet open | boolean | — | Controlled open state. |
| Sheet onOpenChange | (open: boolean) => void | — | Called when the sheet opens or closes. |
| SheetTrigger | button | — | Opens the sheet on click. Supports asChild. |
| SheetContent side | "left" | "right" | "top" | "bottom" | "right" | Which edge the sheet slides in from. |
| SheetHeader | div | — | Container for title and description. |
| SheetTitle | h2 | — | Sheet heading. |
| SheetDescription | p | — | Supporting text below the title. |
| SheetBody | div | — | Scrollable content area. |
| SheetFooter | div | — | Action row pinned to the bottom. |