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