Bottom Sheet
A bottom sheet: drag between snap points, flick down to close. The footer stays on the visible edge at every height.
import { BottomSheet } from "pleate/bottom-sheet";Snap points and simple sheet
Props
- open / onOpenChange
Controlled state.
boolean- snapPoints
Heights as fractions of the viewport.
number[]default [0.92]- defaultSnap
Index of the snap point the sheet opens at.
numberdefault 0- onSnapChange
Called with the snap point the sheet settled on.
(index: number) => void- title / description / footer
Header and pinned footer.
ReactNode- dismissible
Drag down, tap the backdrop or press Escape to close.
booleandefault true- showClose
Round close button in the header.
booleandefault false
Accessibility
- Modal dialog: focus trap, Escape closes (when dismissible).
- Without motion the sheet appears without the spring.