Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Installation
pnpm dlx shadcn@latest add https://reui.io/r/sheet.json
Examples
Default
Scrollable
Side
API Reference
This component is built using Radix UI Dialog primitives. For detailed information, please visit the full API reference.
Sheet
This component is based on the Dialog.Root primitive. For more details, refer to the original documentation.
SheetTrigger
This component is based on the Dialog.Trigger primitive. For more details, refer to the original documentation.
SheetContent
This component is based on the Dialog.Content primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
side | ||
overlay | ||
close | ||
className |
SheetHeader
This component is a custom implementation that provides a consistent layout for the title and description.
| Prop | Type | Default |
|---|---|---|
className |
SheetFooter
This component is a custom implementation that provides a responsive layout for action buttons.
| Prop | Type | Default |
|---|---|---|
className |
SheetTitle
This component is based on the Dialog.Title primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
SheetDescription
This component is based on the Dialog.Description primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
SheetClose
This component is based on the Dialog.Close primitive. For full details, visit the official documentation.
SheetPortal
This component is based on the Dialog.Portal primitive. For full details, visit the official documentation.
SheetOverlay
This component is based on the Dialog.Overlay primitive. For full details, visit the official documentation.