Explorer

Drawer

Bottom sheet drawer with swipe-to-dismiss and smooth spring animations.

Componentsdocsbase-ui/drawer

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/drawer.json

Manual

API Reference

Provider

Provides shared context for global drawer UI such as indent effects.

childrenReactNode

Provider content

Root

Groups all parts of the drawer. Doesn't render its own HTML element.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChangefunction

Called when state changes

onOpenChangeComplete(open: boolean) => void

Called after open/close animations complete

actionsRefRefObject<Drawer.Root.Actions | null>

Imperative close and unmount actions

handleDrawer.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

snapPointsDrawerSnapPoint[]

Snap point heights

defaultSnapPointDrawerSnapPoint | null

Initial uncontrolled snap point

snapPointDrawerSnapPoint | null

Controlled snap point

onSnapPointChangefunction

Called when snap point changes

snapToSequentialPointsboolean

=false

Disable velocity-based snap point skipping

swipeDirectionDrawerSwipeDirection

='down'

Direction that dismisses drawer

modalboolean | 'trap-focus'

=true

Focus trap and backdrop dismiss

disablePointerDismissalboolean

=false

Disable backdrop dismiss

childrenReactNode | function

Drawer content

Trigger

A button that opens the drawer. Renders a button element.

handleDrawer.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

idstring

Element and active trigger id

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

Backdrop

An overlay displayed beneath the popup. Renders a div element.

forceRenderboolean

=false

Force rendering even when nested

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-swiping	Present while a swipe gesture is active

Backdrop CSS variables
Variable	Description
--drawer-swipe-progress	Swipe progress of the drawer gesture
--drawer-swipe-strength	Scalar for swipe release transition timing

Popup

A container for the drawer contents. Renders a div element.

initialFocusboolean | RefObject<HTMLElement> | function

Element to focus on open

finalFocusboolean | RefObject<HTMLElement> | function

Element to focus on close

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-expanded	Present at expanded snap point
data-nested-drawer-open	Present when a nested drawer is open
data-nested-drawer-swiping	Present when a nested drawer is being swiped
data-swipe-direction	Indicates swipe direction
data-swipe-dismiss	Present when dismissed by swiping
data-swiping	Present when being swiped
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Popup CSS variables
Variable	Description
--drawer-frontmost-height	Height of the frontmost open drawer
--drawer-height	Height of the drawer popup
--drawer-snap-point-offset	Snap point offset for translation
--drawer-swipe-movement-x	Swipe movement on X axis
--drawer-swipe-movement-y	Swipe movement on Y axis
--drawer-swipe-strength	Scalar for swipe release transition
--nested-drawers	Number of nested drawers open

Content

A container for the drawer contents. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Title

A heading that labels the drawer. Renders an h2 element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Description

Additional information about the drawer. Renders a p element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close

A button that closes the drawer. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport

A positioning container for the drawer popup. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-nested	Present when nested within another drawer
data-starting-style	Present when animating in
data-ending-style	Present when animating out

SwipeArea

An invisible area that listens for swipe gestures to open the drawer. Renders a div element.

swipeDirectionDrawerSwipeDirection

=opposite of Root swipeDirection

Direction that opens the drawer

disabledboolean

=false

Disable the swipe area

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

SwipeArea data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-disabled	Present when disabled
data-swipe-direction	Indicates swipe direction
data-swiping	Present when being swiped

Indent

A wrapper for host UI that can indent while any drawer in the nearest provider is open.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Indent data attributes
Attribute	Description
data-active	Present when any drawer in the provider is open

IndentBackground

A background layer paired with DrawerIndent for the latest indent effect.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

IndentBackground data attributes
Attribute	Description
data-active	Present when any drawer in the provider is open

Handle

Base UI handle utility for detached triggers and imperative drawer control.

isOpenboolean

=readonly

Whether the associated drawer is open

open(triggerId: string | null) => void

=method

Open and associate the drawer with a trigger id

openWithPayload(payload: Payload) => void

=method

Open with payload for render-child drawer roots

close() => void

=method

Close the associated drawer

Grip

EDBN-only decorative visual grip for bottom drawers. Renders an aria-hidden div.

classNamestring

CSS class name

edbn/ui

Explorer

Drawer

Bottom sheet drawer with swipe-to-dismiss and smooth spring animations.

Componentsdocsbase-ui/drawer

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/drawer.json

Manual

API Reference

Provider

Provides shared context for global drawer UI such as indent effects.

childrenReactNode

Provider content

Root

Groups all parts of the drawer. Doesn't render its own HTML element.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChangefunction

Called when state changes

onOpenChangeComplete(open: boolean) => void

Called after open/close animations complete

actionsRefRefObject<Drawer.Root.Actions | null>

Imperative close and unmount actions

handleDrawer.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

snapPointsDrawerSnapPoint[]

Snap point heights

defaultSnapPointDrawerSnapPoint | null

Initial uncontrolled snap point

snapPointDrawerSnapPoint | null

Controlled snap point

onSnapPointChangefunction

Called when snap point changes

snapToSequentialPointsboolean

=false

Disable velocity-based snap point skipping

swipeDirectionDrawerSwipeDirection

='down'

Direction that dismisses drawer

modalboolean | 'trap-focus'

=true

Focus trap and backdrop dismiss

disablePointerDismissalboolean

=false

Disable backdrop dismiss

childrenReactNode | function

Drawer content

Trigger

A button that opens the drawer. Renders a button element.

handleDrawer.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

idstring

Element and active trigger id

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

Backdrop

An overlay displayed beneath the popup. Renders a div element.

forceRenderboolean

=false

Force rendering even when nested

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-swiping	Present while a swipe gesture is active

Backdrop CSS variables
Variable	Description
--drawer-swipe-progress	Swipe progress of the drawer gesture
--drawer-swipe-strength	Scalar for swipe release transition timing

Popup

A container for the drawer contents. Renders a div element.

initialFocusboolean | RefObject<HTMLElement> | function

Element to focus on open

finalFocusboolean | RefObject<HTMLElement> | function

Element to focus on close

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-expanded	Present at expanded snap point
data-nested-drawer-open	Present when a nested drawer is open
data-nested-drawer-swiping	Present when a nested drawer is being swiped
data-swipe-direction	Indicates swipe direction
data-swipe-dismiss	Present when dismissed by swiping
data-swiping	Present when being swiped
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Popup CSS variables
Variable	Description
--drawer-frontmost-height	Height of the frontmost open drawer
--drawer-height	Height of the drawer popup
--drawer-snap-point-offset	Snap point offset for translation
--drawer-swipe-movement-x	Swipe movement on X axis
--drawer-swipe-movement-y	Swipe movement on Y axis
--drawer-swipe-strength	Scalar for swipe release transition
--nested-drawers	Number of nested drawers open

Content

A container for the drawer contents. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Title

A heading that labels the drawer. Renders an h2 element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Description

Additional information about the drawer. Renders a p element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close

A button that closes the drawer. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport

A positioning container for the drawer popup. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-nested	Present when nested within another drawer
data-starting-style	Present when animating in
data-ending-style	Present when animating out

SwipeArea

An invisible area that listens for swipe gestures to open the drawer. Renders a div element.

swipeDirectionDrawerSwipeDirection

=opposite of Root swipeDirection

Direction that opens the drawer

disabledboolean

=false

Disable the swipe area

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

SwipeArea data attributes
Attribute	Description
data-open	Present when drawer is open
data-closed	Present when drawer is closed
data-disabled	Present when disabled
data-swipe-direction	Indicates swipe direction
data-swiping	Present when being swiped

Indent

A wrapper for host UI that can indent while any drawer in the nearest provider is open.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Indent data attributes
Attribute	Description
data-active	Present when any drawer in the provider is open

IndentBackground

A background layer paired with DrawerIndent for the latest indent effect.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

IndentBackground data attributes
Attribute	Description
data-active	Present when any drawer in the provider is open

Handle

Base UI handle utility for detached triggers and imperative drawer control.

isOpenboolean

=readonly

Whether the associated drawer is open

open(triggerId: string | null) => void

=method

Open and associate the drawer with a trigger id

openWithPayload(payload: Payload) => void

=method

Open with payload for render-child drawer roots

close() => void

=method

Close the associated drawer

Grip

EDBN-only decorative visual grip for bottom drawers. Renders an aria-hidden div.

classNamestring

CSS class name