Bottom Sheet
Draggable bottom sheet that snaps between stops, dismisses when pulled down and cycles on handle click.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
BottomSheetProps
Also accepts all props of Omit<React.ComponentProps<"div">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| open* required | boolean | — | — |
| onOpenChange* required | (open: boolean) => void | — | — |
| title | React.ReactNode | — | — |
| snapPoints | number[] | [0.4, 0.85] | Visible fractions of the container, ascending |
| defaultSnap | number | 0 | Index into snapPoints the sheet opens at |
Install
$ npx shadcn@latest add https://chromotion.dev/r/bottom-sheet.json