Sheet
Motion's bottom-sheet choreography on the native HTML dialog element, with a 50px fade-up entrance plus drag and flick dismissal. Keep SheetBackdrop and SheetPanel as direct Sheet children.
API reference
Components
<Sheet />
Root coordinating native <dialog> state, drag position and element refs.
children?
Trigger, backdrop, panel and resting content.
open?
Controlled open state.
defaultOpen?
Initial open state when uncontrolled. Default false.
onOpenChange?
Called on open-state changes.
<SheetTrigger />
Button that opens the sheet.
children?
Trigger contents.
className?
Merged onto the trigger button.
<SheetBackdrop />
Dimming scrim whose opacity follows the sheet drag position.
className?
Scrim surface class. Defaults to bg-black.
label?
Accessible label; when set the scrim is a dismiss button.
<SheetPanel />
Draggable spring panel with fade-up entrance.
children?
Sheet contents.
dismissOffset?
Downward drag distance (px) to dismiss. Default 92.
dismissVelocity?
Downward flick velocity (px/s) to dismiss. Default 840.
labelledBy?
id of the labelling element, wired to aria-labelledby.
className?
Merged onto the panel.
<SheetHandle />
Decorative grab affordance at the top of the sheet.
className?
Merged onto the centring row.
<SheetClose />
Close button for the top-right of the sheet.
children?
Button contents. Defaults to a close glyph.
label?
Accessible label. Default "Close".
className?
Merged onto the button.
Hooks
useSheet
Read or control the enclosing sheet's open state.
useSheet(): UseSheetReturns
open
Whether the sheet is open.
setOpen
Open or close the sheet.
Functions
shouldDismissSheet
Whether a drag release should dismiss the sheet.
shouldDismissSheet(offsetY: number, velocityY: number, dismissOffset: number, dismissVelocity: number): booleanFeatured in
See the sheet composed into full sections.
