Sheet
A panel that slides in from an edge of the screen, for filters, details and secondary tasks.
When to use
- Filters, details or settings next to the page, while the page stays in view.
- A secondary task that needs more room than a Popover: edit a source's sync settings.
When not to use
- A short task that needs full attention: use Dialog.
- A bottom panel on a touch screen, dismissed with a swipe: use Drawer.
- Persistent app navigation: use Sidebar.
- Confirming a destructive action: use Alert Dialog.
Install
npx shadcn@latest add @clinia/sheetAnatomy
Filters
Narrow the patient list.
- 1Panel
data-slot="sheet-content"bg-popover · border-l · shadow-xl - 2Title
data-slot="sheet-title"text-base · font-medium - 3Description
data-slot="sheet-description"text-sm · text-muted-foreground - 4Body
[data-part=body]px-6 - 5Footer
data-slot="sheet-footer"mt-auto · main action on top - 6Close button
data-slot="sheet-close"ghost · icon-sm
Clinia rules
- It slides in from the right by default (
side). Left and right sheets take three quarters of the screen width, capped atmax-w-smfromsmup. - The title is sentence case and names what's inside:
Filter records. - The footer stacks its buttons at the bottom of the sheet. Put the main action on top.
- Keep the close button (
showCloseButton), unless the footer has its own way out.
Do and don't
Filters
Narrow the patient list.
Delete this source?
Its records are removed from the workspace.
Accessibility
Built in
- Built on Base UI Dialog: focus moves into the sheet and stays inside, Escape closes it, and focus returns to the trigger.
- The corner close button is labelled
Closefor screen readers.
Your responsibility
- Always render a
SheetTitle. AddSheetDescriptionwhen the title alone doesn't explain the panel. - Open it from a real button, so focus has somewhere to return.
How to test
- Open it with the keyboard: focus lands inside the sheet.
- Press Tab repeatedly: focus cycles through the sheet and never reaches the page behind.
- Press Escape: it closes, and focus returns to the button that opened it.
- With a screen reader, opening it announces a dialog and its title.
API
SheetContent
| Prop | Values | Default | Description |
|---|---|---|---|
| side | toprightbottomleft | right | The edge the sheet slides in from. |
| showCloseButton | boolean | true | Shows the close button in the corner. Turn it off only when the footer has its own way out. |
All other props come from Base UI Dialog.