api

Compound API

Every prop, type, and default. All components also forward standard HTML attributes — className, style, data-*, event handlers.

Drawer.Root

open—

boolean

Controlled open state. Pair with onOpenChange.

defaultOpenfalse

boolean

Uncontrolled initial open state.

onOpenChange—

(open: boolean) => void

Called whenever the drawer opens or closes.

direction"bottom"

"top" | "bottom" | "left" | "right"

Which edge the drawer slides from. Determines gesture axis and transform direction.

variant"default"

"default" | "floating" | "sheet" | "fullscreen" | "nested" | "stack"

Visual mode. Affects border radius, margin, and animation preset.

modaltrue

boolean

Locks page scroll and traps focus inside the drawer while open.

dismissibletrue

boolean

Whether overlay click and Escape key close the drawer.

snapPoints[]

SnapPoint[]

Snap positions. number = px from edge, "25%" = fraction of viewport, "content" = content height.

activeSnapPoint—

number

Controlled snap index. 0 is the smallest point, length - 1 is the largest.

onSnapPointChange—

(index: number) => void

Called when the active snap index changes after a drag.

closeThreshold0.5

number

Fraction of the drawer height that must be dragged before auto-close triggers on release.

rubberBandtrue

boolean

Elastic resistance when dragging past the open or closed extent.

inertiatrue

boolean

Uses release velocity to project the landing snap point. Fast flick = skip a snap.

shouldScaleBackgroundfalse

boolean

Scales the page element behind the drawer down when open. Add data-hiraki-background to the element to scale.

onDragStart—

(data: GestureCallbackData) => void

Fires once when a drag gesture is confirmed (after axis lock).

onDrag—

(data: GestureCallbackData) => void

Fires on every pointer move during a drag.

onDragEnd—

(data: GestureCallbackData) => void

Fires when the pointer is released, with final velocity and translate.

Drawer.Portal

containerdocument.body

HTMLElement | null

DOM node to portal into. Defaults to document.body.

Drawer.Trigger

asChildfalse

boolean

Merges props onto the child element instead of rendering a button.

Drawer.Close

asChildfalse

boolean

Merges props onto the child element instead of rendering a button.

Drawer.Handle

visibletrue

boolean

Controls whether the handle pill is rendered.

handleOnlyfalse

boolean

When true, drag gestures only start from the handle, not the full content area.

Drawer.Content

...HTMLAttributes—

React.HTMLAttributes<HTMLDivElement>

All standard div props forwarded. Use className to apply your own styles.

Drawer.Overlay

...HTMLAttributes—

React.HTMLAttributes<HTMLDivElement>

All standard div props forwarded. Opacity tracks drag progress via direct DOM mutation.