
Hiraki: React Drawer with Snap Points & Bottom Sheet
hiraki: a React library that creates bottom sheets, off-canvas navigation menus, and drawer panels in all four directions. Key features: Velocity-aware touch gestures with inertia-based snap targeting Snap points in pixels, viewport percentages, or content height Six layout variants: default, floating, sheet, fullscreen, nested, stack ARIA dialog semantics, focus trapping, scroll locking, and iOS Safari support Pure CSS animation presets with prefers-reduced-motion support React is the only peer dependency at approximately 10 KB gzipped Ships no CSS file. Style with Tailwind, CSS variables, or inline styles. Your app owns the look; the library owns the behavior. π Blog Post π GitHub Repo π Live Demo
Continue reading on Dev.to React
Opens in a new tab




