Drawer

Displays a slide-in panel for additional content or navigation.

Usage

Used to present content in a slide-in panel that overlays the main interface.

import { Drawer } from "@elemnts-ui/react";

<Drawer.Root>
  <Drawer.Trigger />
  <Drawer.Backdrop />
  <Drawer.Positioner>
    <Drawer.Content>
      <Drawer.Grabber>
        <Drawer.GrabberIndicator />
      </Drawer.Grabber>
      <Drawer.Title>Title</Drawer.Title>
      <Drawer.Description>Description</Drawer.Description>
      <Drawer.CloseTrigger />
    </Drawer.Content>
  </Drawer.Positioner>
</Drawer.Root>;

Examples

Controlled

Control the drawer's open state using the open and onOpenChange props.

Swipe directions

Adjust the drawer's swipe direction using the swipeDirection prop.

API Reference

DrawerRoot

The root component for the drawer.

Prop	Type	Default
closeOnEscape	`boolean`	`true`
closeOnInteractOutside	`boolean`	`true`
closeThreshold	`number`	`0.25`
defaultOpen	`boolean`	`undefined`
defaultSnapPoint	`SnapPoint`	`undefined`
defaultTriggerValue	`string`	`undefined`
finalFocusEl	`() => MaybeElement`	`undefined`
hideMode	`HideMode`	`display-none`
immediate	`boolean`	`undefined`
initialFocusEl	`() => MaybeElement`	`undefined`
modal	`boolean`	`true`
onEscapeKeyDown	`(event: KeyboardEvent) => void`	`undefined`
onExitComplete	`VoidFunction`	`undefined`
onFocusOutside	`(event: FocusOutsideEvent) => void`	`undefined`
onInteractOutside	`(event: InteractOutsideEvent) => void`	`undefined`
onOpenChange	`(details: OpenChangeDetails) => void`	`undefined`
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	`undefined`
onRequestDismiss	`(event: LayerDismissEvent) => void`	`undefined`
onSnapPointChange	`(details: SnapPointChangeDetails) => void`	`undefined`
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	`undefined`
open	`boolean`	`undefined`
present	`boolean`	`undefined`
preventDragOnScroll	`boolean`	`true`
preventScroll	`boolean`	`true`
restoreFocus	`boolean`	`undefined`
skipAnimationOnMount	`boolean`	`false`
snapPoint	`SnapPoint`	`undefined`
snapPoints	`SnapPoint[]`	`[1]`
snapToSequentialPoints	`boolean`	`false`
stack	`DrawerStack`	`undefined`
swipeDirection	`SwipeDirection`	`down`
swipeVelocityThreshold	`number`	`700`
trapFocus	`boolean`	`true`
triggerValue	`string`	`undefined`

DrawerContent

The content component for the drawer.

Prop	Type	Default
asChild	`boolean`	`undefined`
draggable	`boolean`	`undefined`