Drawer.Root & Drawer.NestedRoot
Drawer.Root is the top-level container component that manages state, touch events, snap calculations, and context.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state of the drawer. |
defaultOpen | boolean | false | Uncontrolled initial open state. Skips initial enter animation. |
onOpenChange | (open: boolean) => void | undefined | Callback invoked when open state changes. |
snapPoints | (number | string)[] | undefined | Array of snap point ratios (0.2) or pixel values ('300px'). |
activeSnapPoint | number | string | null | undefined | Controlled active snap point. |
setActiveSnapPoint | (point: number | string | null) => void | undefined | Setter callback for active snap point. |
fadeFromIndex | number | snapPoints.length - 1 | Snap point index from which overlay background fades out. |
snapToSequentialPoint | boolean | false | When true, prevents velocity-based skipping of intermediate snap points. |
direction | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | Slide orientation direction of the drawer. |
shouldScaleBackground | boolean | false | Scales application content wrapper ([data-temper-drawer-wrapper]). |
setBackgroundColorOnScale | boolean | true | When true, sets document.body background to black while opened. |
dismissible | boolean | true | When false, dragging/escaping/clicking outside will not close drawer. |
modal | boolean | true | When false, background page elements remain interactive. |
handleOnly | boolean | false | Restricts drag gestures exclusively to <Drawer.Handle />. |
closeThreshold | number | 0.25 | Drag distance ratio (0 to 1) required to trigger close. |
scrollLockTimeout | number | 500 | Duration (ms) drag is locked after scrolling inside content. |
repositionInputs | boolean | true | Repositions input fields when virtual mobile keyboard opens. |
noBodyStyles | boolean | false | Disables inline style modifications on <body>. |
disablePreventScroll | boolean | false | Disables background body scroll lock on mount. |
fixed | boolean | false | Prevents upward movement on virtual keyboard open, keeping fixed height. |
onDrag | (e: PointerEvent, percentage: number) => void | undefined | Callback fired during active drag gesture. |
onRelease | (e: PointerEvent, open: boolean) => void | undefined | Fired when drag pointer is released. |
onAnimationEnd | (open: boolean) => void | undefined | Fired after open or close animation completes. |
onClose | () => void | undefined | Callback fired when drawer is closed. |
Drawer.NestedRoot
Inherits all props from Drawer.Root. Must be placed inside an existing parent <Drawer.Content>. Automatically calculates parent displacement and scale during nested operations.