Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Sheets are slide-in panels that overlay the main content, used for contextual tasks like editing settings or displaying additional information without navigating away.
Basic Usage
Sides
Use the side prop on SheetContent to control which edge the panel slides in from.
API Reference
Sheet
Root component. Manages open/closed state.
SheetTrigger
The element that opens the sheet. Use asChild to render as your own element.
SheetContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | Which edge the sheet slides in from |
SheetHeader
Container for SheetTitle and SheetDescription. Provides consistent spacing.
SheetTitle
The sheet's accessible title. Always include this for screen reader support.
SheetDescription
Optional subtitle shown below the title.
SheetFooter
Container for action buttons. Pushes to the bottom of the sheet via mt-auto.
SheetClose
Closes the sheet when activated. Use asChild to render as a Button.