- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Sheet
Dialog-based side sheet with configurable placement (left, right, top, bottom), optional close button, and composition helpers including SheetHeader, SheetFooter, SheetTitle, and SheetDescription.
Import
Live Demo
Side sheet with left/right/top/bottom placements, close icon states, and composed content.
Figma: DS-shadcn-001 Foundations · Sheet 220:4633 · Close Icon 5037:3220 · Example Content 424:7014
Sheet / Close Icon states
Props
| Name | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | Placement of the sheet panel |
| showCloseButton | boolean | true | Whether the close icon is rendered in SheetContent |
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Called when open state changes |
Examples
Basic Sheet
Sheet Sides
Render sheet from all four directions.