127 Components
Kinetic Drawer Sheet
OverlaysBottom gesture sheet featuring Peek and Full spring detents, velocity-projected flick transitions, and rubber-band over-drag.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/kinetic-drawer-sheet.json"
Props
TypeScript props supported by <KineticDrawerSheet />.
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerLabel | string | "Open Gesture Drawer" | Text rendered inside the drawer trigger button. |
| title | string | "Multi-Detent Spring Sheet" | Heading title displayed inside the drawer sheet. |
| stiffness | number | 320 | Hooke's Law spring stiffness for sheet entry and detent transitions. |
| damping | number | 28 | Spring damping coefficient controlling sheet settle. |
Key Features
- Two-stage detent snapping (Peek and Full) responsive to vertical pan velocity and displacement.
- Rubber-band drag elasticity at the top boundary.
- Explicit button detent switcher for non-gesture pointer and keyboard accessibility.
Keyboard & Accessibility
- Implements role='dialog' and aria-modal='true' with Escape key dismissal.
- Includes a dedicated Expand/Peek button so keyboard users can switch detents without dragging.
- Disables vertical drag physics when prefers-reduced-motion is enabled.