Sheet
A slide-out panel component with animations.
Installation
First install? Complete the one-time host setup.
Live preview
A panel that slides in from a screen edge, for secondary flows that need more room than a popover — filters, a detail editor, navigation.
Loading preview…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side (on SheetContent) | 'top' | 'right' | 'bottom' | 'left' | 'right' | Which edge the panel slides in from. |
| showClose (on SheetContent) | boolean | true | Render the built-in close button. |
Parts
| Part | Description |
|---|---|
SheetTrigger | Opens the sheet. Use asChild to wrap your own button. |
SheetContent | The sliding panel. Set side to choose the edge. |
SheetHeader / SheetTitle / SheetDescription | The titled header region. |
SheetFooter | The action row pinned to the bottom of the panel. |
SheetClose | Dismisses the sheet; wrap your own button with asChild. |
SheetStackProvider | Opt-in wrapper that lets nested sheets stack and offset instead of replacing each other. |