Drag & physics
Bottom sheet
A sheet that springs up from the bottom, rests at snap points and can be flicked away.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { BottomSheet } from '@vizzele/react';
const [open, setOpen] = useState(false);
<button onClick={() => setOpen(true)}>Open</button>
<BottomSheet open={open} onOpenChange={setOpen} snapPoints={[0.45, 0.92]} title="Filters">
…
</BottomSheet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open / onOpenChange | boolean / (open) => void | — | Controlled state. |
snapPoints | number[] | [0.45, 0.92] | Rest heights as fractions of the viewport. |
defaultSnap | number | 0 | Snap index to open at. |
title | ReactNode | — | Heading and accessible name. |
dismissible | boolean | true | Close by flicking down, Escape or the backdrop. |
Accessibility
- role="dialog" + aria-modal; focus moves in, Tab is trapped, Escape closes and focus returns to the opener.
- The grab handle is a button: Enter cycles through the snap points.
- Only the header drags, so the content scrolls normally.