hiraki

hiraki (開き)

Zero-dependency React drawer component. All 4 directions, velocity-aware gestures, snap points, and 6 variants — without Radix, Framer Motion, or any external runtime dependency.

~10 KB gzipped — React >=18 is the only peer dep.

Install

npm install hiraki
pnpm add hiraki
yarn add hiraki

Usage

import { Drawer } from 'hiraki'

function App() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Handle />
          <Drawer.Title>Title</Drawer.Title>
          <Drawer.Description>Description</Drawer.Description>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}

Controlled open state:

const [open, setOpen] = useState(false)

<Drawer.Root open={open} onOpenChange={setOpen}>
  ...
</Drawer.Root>

Snap points:

<Drawer.Root snapPoints={['25%', '55%', '90%']}>
  ...
</Drawer.Root>

Direction:

<Drawer.Root direction="right">
  ...
</Drawer.Root>

API

Drawer.Root

prop	type	default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
direction	"top" | "bottom" | "left" | "right"	"bottom"
variant	"default" | "floating" | "sheet" | "fullscreen" | "nested" | "stack"	"default"
modal	boolean	true
dismissible	boolean	true
snapPoints	(number | string)[]	[]
activeSnapPoint	number	—
onSnapPointChange	(index: number) => void	—
closeThreshold	number	0.5
rubberBand	boolean	true
inertia	boolean	true
shouldScaleBackground	boolean	false
onDragStart	(data: GestureCallbackData) => void	—
onDrag	(data: GestureCallbackData) => void	—
onDragEnd	(data: GestureCallbackData) => void	—

Drawer.Handle

prop	type	default
visible	boolean	true
handleOnly	boolean	false

Drawer.Trigger / Drawer.Close

prop	type	default
asChild	boolean	false

All components forward standard HTML attributes (className, style, data-*, event handlers).

Snap points

Snap points define positions where the drawer rests. Three formats are supported:

• Pixels from edge — 200 means 200px of the drawer is visible
• Percentage of viewport — '55%' means 55% of viewport height (or width for left/right)
• Content height — 'content' snaps to the drawer's natural content height

The drawer starts at the largest snap point. Velocity on release determines whether to snap forward, backward, or close.

// percentage
<Drawer.Root snapPoints={['25%', '55%', '90%']}>

// pixels
<Drawer.Root snapPoints={[200, 400, 600]}>

// content height
<Drawer.Root snapPoints={['content']}>

// controlled
<Drawer.Root
  snapPoints={['25%', '55%', '90%']}
  activeSnapPoint={snap}
  onSnapPointChange={setSnap}
>

Styling

Hiraki ships no CSS file or classNames. Style with Tailwind, CSS variables, or the style prop:

<Drawer.Content className="bg-white rounded-t-2xl shadow-xl">
  <Drawer.Handle className="bg-gray-300" />
  <Drawer.Title className="text-lg font-semibold px-6 pt-6">
    Title
  </Drawer.Title>
</Drawer.Content>

CSS custom properties exposed during drag:

property	description
--hiraki-drag-progress	0 (closed) to 1 (open), updates on every frame

Scale the page behind the drawer:

<Drawer.Root shouldScaleBackground>
  ...
</Drawer.Root>

// Mark the element to scale
<div data-hiraki-background>
  {/* page content */}
</div>

License

MIT