ddoemonn

ddoemonn / hiraki

Public

zero-dependency react drawer component

hiraki.ozergklp.com accessible component compound drawer headless
12
0
100% credibility
Found Mar 25, 2026 at 12 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Hiraki is a lightweight React component library for building interactive drawers that slide from any screen edge with natural gestures, snap points, and no extra dependencies.

How It Works

1
🔍 Discover hiraki

While building a web app, you search for smooth sliding panels and find hiraki, a tool for creating draggable drawers.

2
🌐 Explore the demos

You visit the colorful demo page and play with drawers sliding from bottom, top, left, or right, feeling how natural the drags are.

3
✨ Add to your app

You easily bring hiraki into your project with a quick step, and it's ready to make your panels slide beautifully.

4
🛠️ Create your first drawer

You add a button that opens a panel filled with your content, and it smoothly slides into view.

5
🎛️ Customize the motion

You pick the slide direction, set handy stop positions, and test swipes that snap just right.

✅ Silky smooth experience

Your app now delights users with intuitive, gesture-powered drawers that feel like magic.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 12 to 12 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is hiraki?

Hiraki is a zero-dependency TypeScript React component for drawers that slide in from any edge—bottom, top, left, or right—like a smooth bottom sheet or sidebar. Unlike bloated UI kits, it handles velocity-aware drag gestures, snap points (pixels, percentages, or content height), and accessibility out of the box, all in ~10KB gzipped. Install with `pnpm add hiraki` and drop in a compound API: `` for instant mobile-first overlays.

Why is it gaining traction?

It ditches Radix or Framer Motion for pure gesture physics and CSS transitions (slide, spring, scale), respecting reduced motion prefs without runtime bloat. Developers love the Tailwind-friendly styling via className or CSS vars like `--hiraki-drag-progress`, plus features like overlay scaling and focus traps that just work on iOS Safari. No telemetry, MIT license, and a polished Next.js docs site make it a lightweight swap for heavy component libs.

Who should use this?

React frontend devs building PWAs or apps with bottom sheets, persistent side navs, or image viewers needing precise drag-to-dismiss. Perfect for TypeScript teams at startups avoiding vendor lock-in, or those prototyping harakiri piste-style UIs (think vertical swipes) without writing gesture boilerplate. Skip if you need complex animations beyond CSS presets.

Verdict

Promising early project (12 stars, 1.0% credibility) with solid docs, Vitest coverage, and a pro landing page—worth a test drive for zero-dep drawers. Maturity is low, so audit for edge cases before prod, but it's already more capable than most one-offs.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.