Snap Drawer
Dialogs
Source and install need .
pnpm dlx shadcn@latest add @assembli/sheetSheet
The side sheet for details, inspectors, filters and edit forms, on Base UI's Drawer. It slides from any edge, floating or flush, and swipes away on touch. Header and footer stay pinned, with dividers only once content scrolls under them. Nested sheets stack, the one behind stepping back and dimming. confirmClose turns every dismissal into a "Discard unsaved changes?" bar.
Props
Other props pass through to the root element.
open
boolean
defaultOpen
boolean
Default
falseonOpenChange
(open: boolean) => void
trigger
React.ReactElement<Record<string, unknown>>
An element that opens the sheet, e.g. a
<button>. It is rendered as the trigger, so it keeps its own styles.side
SheetSide
Default
"right"The edge it slides from, and the direction a swipe dismisses it.
size
SheetSize
Default
"md"Width for left and right sheets, max width for top and bottom ones.
inset
boolean
Default
trueA floating, rounded panel held off the edge. Set
falsefor a flush panel.title*
React.ReactNode
description
React.ReactNode
icon
React.ReactNode
A small mark before the title: an icon tile, avatar or status dot.
actions
React.ReactNode
Header buttons placed before the close button. Use
SheetActionfor matching icon buttons.footer
React.ReactNode
A pinned row under the content, e.g. Cancel and Save. Use
SheetClosefor a button that closes.children
React.ReactNode
confirmClose
boolean | SheetConfirmClose
Ask before closing, e.g. while a form is dirty. Escape, the backdrop, a swipe and the close button all stop at a "Discard unsaved changes?" bar in the footer instead of closing.
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount inside this element instead of
<body>, covering only it (a pane, a canvas, a preview frame). Nested sheets inherit it.modal
boolean
Default
trueTraps focus, locks page scroll and blocks outside clicks. Defaults to
true.hideClose
boolean
bodyClassName
string
Classes for the scrolling body;
classNamegoes on the panel.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | – | |
| defaultOpen | boolean | false | |
| onOpenChange | (open: boolean) => void | – | |
| trigger | React.ReactElement<Record<string, unknown>> | – | An element that opens the sheet, e.g. a <button>. It is rendered as the trigger, so it keeps its own styles. |
| side | SheetSide | "right" | The edge it slides from, and the direction a swipe dismisses it. |
| size | SheetSize | "md" | Width for left and right sheets, max width for top and bottom ones. |
| inset | boolean | true | A floating, rounded panel held off the edge. Set false for a flush panel. |
| title* | React.ReactNode | – | |
| description | React.ReactNode | – | |
| icon | React.ReactNode | – | A small mark before the title: an icon tile, avatar or status dot. |
| actions | React.ReactNode | – | Header buttons placed before the close button. Use SheetAction for matching icon buttons. |
| footer | React.ReactNode | – | A pinned row under the content, e.g. Cancel and Save. Use SheetClose for a button that closes. |
| children | React.ReactNode | – | |
| confirmClose | boolean | SheetConfirmClose | – | Ask before closing, e.g. while a form is dirty. Escape, the backdrop, a swipe and the close button all stop at a "Discard unsaved changes?" bar in the footer instead of closing. |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount inside this element instead of <body>, covering only it (a pane, a canvas, a preview frame). Nested sheets inherit it. |
| modal | boolean | true | Traps focus, locks page scroll and blocks outside clicks. Defaults to true. |
| hideClose | boolean | – | |
| bodyClassName | string | – | Classes for the scrolling body; className goes on the panel. |
