A draggable bottom sheet with peek and full snap points, velocity-aware flicks and drag down to dismiss. The default content is a ride picker with a radio list and a sticky confirm button.
Pickup at 221 Mercer St · 3 min walk
npx shadcn@latest add https://hyperblur.dev/r/modal-bottom-sheet.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-bottom-sheet.tsx.
import { ModalBottomSheet } from "@/components/hyperblur/modal-bottom-sheet"
<ModalBottomSheet onConfirm={(ride) => requestRide(ride)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Choose a ride" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| title | string | "Choose a ride" | Sheet heading. |
| subtitle | string | "Pickup at 221 Mercer St · 3 min walk" | Line under the heading with a live dot. |
| options | { id: string; name: string; seats: number; eta: string; arrival: string; price: string; tag?: string }[] | 4 ride types | Choices rendered as a radio group. |
| value | string | undefined | Controlled selected option id. |
| defaultValue | string | "comfort" | Initially selected option when uncontrolled. |
| onChange | (id: string) => void | undefined | Called when the selection changes. |
| onConfirm | (id: string) => void | undefined | Called with the selected id when the confirm button is pressed. |
| payment | string | "Visa •• 4242" | Payment method shown above the button. |
| defaultSnap | "peek" | "full" | "peek" | Snap point the sheet opens at. Drag the handle or use the arrow keys on it to switch. |
| accent | string | "#d4f75a" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |