Components
Sheet
A panel that slides in from an edge, for details next to the page.
shadcn/uiOverlays
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/sheet.tsxPreview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add sheetExamples
Sides
Right for details beside the page; left for the phone menu.
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" |
| open | boolean | – |
| onOpenChange | (open: boolean) => void | – |
Guidelines
Use it
- Comments, details and filters that sit beside the content.
- The menu on phones.
Don't
- Use it for a decision: that's a dialog.
Accessibility
- It behaves as a dialog: focus moves in, Escape closes it.