Sheet
A panel from the edge of the screen, with swipe to dismiss.
Installation
npx shadcn@latest add @quireui/sheetUsage
<Sheet side="right">
<SheetTrigger render={<Button />}>Filters</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Filters</SheetTitle>
</SheetHeader>
<SheetBody>{/* fields */}</SheetBody>
<SheetFooter>
<SheetClose render={<Button variant="primary" />}>Apply filters</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>Sides
side: right (default), left or bottom. On touch, swipe toward that edge to dismiss. The bottom sheet shows a grab handle.
Shared with Dialog
Header, body, footer and form parts are the same as Dialog: only the body scrolls, dirty asks before closing with unsaved changes, and Cmd/Ctrl+Enter submits a SheetForm.
Accessibility
Like Dialog, a sheet is a modal dialog named by its title, and the page behind it is hidden from screen readers while it is open. The close button is named "Close", and the unsaved-changes question is an alert.
| Key | Action |
|---|---|
| Esc | Closes the sheet. With dirty, it asks first, and Esc on that question keeps editing. |
| Tab / Shift+Tab | Moves through the sheet. Focus stays inside while it is open, and starts on the first field. |
| Cmd/Ctrl+Enter | Submits the SheetForm from any field, textareas included. |
Motion
It slides in from its edge in 220ms and out in 110ms, follows your finger while swiping, opens instantly from the keyboard, and fades instead of sliding under reduced motion. Built on Base UI Drawer.
API reference
Sheet
A panel from the edge of the screen. Swipe toward its edge to dismiss on touch.
Prop
Type
Also takes every prop of Base UI's Drawer.Root.
SheetTrigger
Also takes every prop of Base UI's Drawer.Trigger.
SheetClose
Also takes every prop of Base UI's Drawer.Close.
SheetContent
Prop
Type
Also takes every prop of Base UI's Drawer.Popup. Style it with [data-slot="sheet"].
SheetTitle
Also takes every prop of Base UI's Drawer.Title.
SheetDescription
Also takes every prop of Base UI's Drawer.Description.