Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Made by imskyleenPowered by
Loading component...
When to use
Sheets display supplementary content that slides from screen edges. Use this decision tree:
Installation
Usage
<Sheet>
<SheetTrigger>Open Sheet</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Description</SheetDescription>
</SheetHeader>
<p>Sheet Content</p>
<SheetFooter>
<button>Close</button>
</SheetFooter>
</SheetContent>
</Sheet>Anatomy
The Sheet component extends Dialog for side-sliding content:
<Sheet> (Dialog-based)
├── <SheetTrigger> (Button)
├── <SheetContent> (Sliding Panel)
│ ├── Side positioning (top/right/bottom/left)
│ ├── Animation (slide + fade)
│ ├── <SheetHeader>
│ │ ├── <SheetTitle> (h2)
│ │ └── <SheetDescription>
│ ├── Content Area (scrollable)
│ └── <SheetFooter>
├── Sheet Overlay (backdrop)
└── Focus managementProps
Radix UI
Shadcn UI
Animate UI Props
SheetContent
Prop
Type
Credits
- We use Radix UI for the sheet component.
- We take our inspiration from Shadcn UI for the sheet style.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.