---
title: Drawer
subtitle: A panel that slides in from the edge of the screen.
description: A high-quality, unstyled React drawer component with swipe-to-dismiss gestures.
---
# Drawer
A high-quality, unstyled React drawer component with swipe-to-dismiss gestures.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { Drawer } from '@base-ui/react/drawer';
export default function ExampleDrawer() {
return (
Open drawer
Drawer
This is a drawer that slides in from the side. You can swipe to dismiss it.
);
}
```
## Usage guidelines
- **Drawer extends [Dialog](/react/components/dialog.md):** It adds gesture support, snap points, and indent effects. If you don't need these, use Dialog instead. A panel that slides in from the edge of the screen and doesn't need gesture support is a positioned Dialog.
## Anatomy
Import the component and assemble its parts:
```jsx title="Anatomy"
import { Drawer } from '@base-ui/react/drawer';
;
```
Drawer supports swipe gestures to dismiss. Set `swipeDirection` to control which direction dismisses the drawer. `` allows text selection of its children without swipe interference when using a mouse pointer. Add `data-base-ui-swipe-ignore` to a descendant when you need to opt that element out of swipe dismissal for all input types.
## Examples
### State
By default, Drawer is an uncontrolled component that manages its own state.
```tsx title="Uncontrolled drawer"
OpenExample drawerClose
```
Use `open` and `onOpenChange` props if you need to access or control the state of the drawer.
```tsx title="Controlled drawer"
const [open, setOpen] = React.useState(false);
return (
OpenExample drawerClose
);
```
### Position
Positioning is handled by your styles. `swipeDirection` defaults to `"down"` for bottom sheets. Use `"up"`, `"left"`, or `"right"` for other drawer positions.
```tsx title="Swipe directions"
```
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { Drawer } from '@base-ui/react/drawer';
export default function ExampleDrawer() {
return (
Open bottom drawer
Notifications
You are all caught up. Good job!
);
}
```
### Nested drawers
Use the `[data-nested-drawer-open]` selector and the `--nested-drawers` CSS variable to style drawers when a nested drawer is open.
This demo stacks nested drawers using a constant peek so the frontmost drawer stays anchored to the bottom while the ones behind it are scaled down and lifted. It also uses the `--drawer-height` and `--drawer-frontmost-height` CSS variables to handle varying drawer heights.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import { Drawer } from '@base-ui/react/drawer';
export default function ExampleDrawerNested() {
return (
Open drawer stack
Account
Nested drawers can be styled to stack, while each drawer remains independently focus
managed.
Security settings
Security
Review sign-in activity and update your security preferences.
Passkeys enabled
2FA via authenticator app
3 signed-in devices
Advanced options
Advanced
This drawer is taller to demonstrate variable-height
stacking.
Security settings
Security
Review sign-in activity and update your security preferences.
Passkeys enabled
2FA via authenticator app
3 signed-in devices
Advanced options
Advanced
This drawer is taller to demonstrate variable-height
stacking.
Done
Close
Close
);
}
```
### Snap points
Use `snapPoints` to snap a bottom sheet drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport height, and numbers greater than 1 are treated as pixel values. String values support `px` and `rem` units (for example, `'148px'` or `'30rem'`).
```tsx title="Snap points"
const snapPoints = ['148px', 1];
const [snapPoint, setSnapPoint] = React.useState(snapPoints[0]);
{/* ... */}
;
```
Apply the snap point offset in your styles when using vertical drawers:
```css title="Snap point offset"
.DrawerPopup {
transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
}
```
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
const TOP_MARGIN_REM = 1;
const VISIBLE_SNAP_POINTS_REM = [30];
function toViewportSnapPoint(heightRem: number) {
return `${heightRem + TOP_MARGIN_REM}rem`;
}
const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
export default function ExampleDrawerSnapPoints() {
return (
Open snap drawer
Snap points
Drag the sheet to snap between a compact peek and a near full-height view.
Drag the sheet to snap between a compact peek and a near full-height view.
{Array.from({ length: 20 }, (_, index) => (
))}
Close
);
}
```
By default, the drawer can skip snap points when swiping quickly. Specify the `snapToSequentialPoints` prop to disable velocity-based skipping so the snap target is determined by drag distance (you can still drag past multiple points).
### Indent effect
Scale the background down when any drawer opens by wrapping your app in `` and use `` + `` at the top of your tree. Any `` within the provider notifies it when it mounts, which activates the indent parts (they receive `[data-active]` state attributes).
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
export default function ExampleDrawer() {
const [portalContainer, setPortalContainer] = React.useState(null);
return (
Open drawer
Notifications
You are all caught up. Good job!
Open drawerNotifications
You are all caught up. Good job!
Close
);
}
```
### Non-modal
Set `modal={false}` to opt out of focus trapping and `disablePointerDismissal` to keep the drawer open on outside clicks.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { Drawer } from '@base-ui/react/drawer';
export default function ExampleDrawer() {
return (
Open non-modal drawer
Non-modal drawer
This drawer does not trap focus and ignores outside clicks. Use the close button or
swipe to dismiss it.
Library
Swipe from the edge whenever you want to jump back into your playlists.
Close
);
}
```
### Action sheet with separate destructive action
This demo builds an action sheet with a grouped list of actions plus a separate destructive action button.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
const ACTIONS = ['Unfollow', 'Mute', 'Add to Favourites', 'Add to Close Friends', 'Restrict'];
export default function ExampleDrawerUncontained() {
const [open, setOpen] = React.useState(false);
return (
Open action sheet
Profile actions
Choose an action for this user.
);
}
```
### Detached triggers
A drawer can be controlled by a trigger located either inside or outside the `` component. For simple, one-off interactions, place the `` inside ``.
However, if defining the drawer's content next to its trigger is not practical, you can use a detached trigger. This involves placing the `` outside of `` and linking them with a `handle` created by the `Drawer.createHandle()` function.
```jsx title="Detached triggers"
const demoDrawer = Drawer.createHandle();
Open
...
```
The drawer can render different content depending on which trigger opened it. This is achieved by passing a `payload` to the `` and using the function-as-a-child pattern in ``.
```jsx title="Detached triggers with payload"
const demoDrawer = Drawer.createHandle<{ title: string }>();
Profile
Settings
{({ payload }) => (
{payload?.title}
)}
```
### Stacking and animations
Use CSS transitions or animations to animate drawer opening, closing, swipe interactions, and nested stacking. The `data-starting-style` attribute is applied when a drawer starts to open, and `data-ending-style` is applied when it starts to close.
The `--nested-drawers` CSS variable can be used to determine stack depth. The frontmost drawer has index `0`.
```css title="Stack depth"
.DrawerPopup {
--stack-step: 0.05;
--stack-scale: calc(1 - (var(--nested-drawers) * var(--stack-step)));
transform: translateY(var(--drawer-swipe-movement-y)) scale(var(--stack-scale));
}
```
When stacked drawers have varying heights, use the `--drawer-height` and `--drawer-frontmost-height` variables to keep collapsed drawers aligned with the frontmost one.
```css title="Variable-height stacking"
.DrawerPopup {
--bleed: 3rem;
--stack-height: max(
0px,
calc(var(--drawer-frontmost-height, var(--drawer-height)) - var(--bleed))
);
height: var(--drawer-height, auto);
}
.DrawerPopup[data-nested-drawer-open] {
height: calc(var(--stack-height) + var(--bleed));
overflow: hidden;
}
```
The `data-nested-drawer-open` attribute marks drawers behind the frontmost drawer. Use it with `data-nested-drawer-swiping` to dim or hide parent drawer content while keeping it visible during nested swipe interactions.
```css title="Nested content visibility" "data-nested-drawer-open" "data-nested-drawer-swiping"
.DrawerContent {
transition: opacity 300ms;
}
.DrawerPopup[data-nested-drawer-open] .DrawerContent {
opacity: 0;
}
.DrawerPopup[data-nested-drawer-open][data-nested-drawer-swiping] .DrawerContent {
opacity: 1;
}
```
The `--drawer-swipe-movement-x`, `--drawer-swipe-movement-y`, and `--drawer-snap-point-offset` CSS variables can be used to create smooth drag and snap offsets:
```css title="Swipe and snap offset" "--drawer-swipe-movement-x" "--drawer-swipe-movement-y"
.DrawerPopup[data-swipe-direction='right'] {
transform: translateX(var(--drawer-swipe-movement-x));
}
.DrawerPopup[data-swipe-direction='down'] {
transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
}
```
The `data-swipe-direction` attribute can be used with `data-ending-style` to animate directional dismissal:
```css title="Swipe dismissal direction" "data-swipe-direction"
.DrawerPopup[data-ending-style][data-swipe-direction='right'] {
transform: translateX(100%);
}
.DrawerPopup[data-ending-style][data-swipe-direction='down'] {
transform: translateY(100%);
}
```
Use `--drawer-swipe-progress` to fade the backdrop as the drawer is swiped, and `--drawer-swipe-strength` to scale release transition durations based on swipe velocity.
```css title="Backdrop and release timing"
.DrawerBackdrop {
--backdrop-opacity: 0.2;
opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
}
.DrawerPopup[data-ending-style],
.DrawerBackdrop[data-ending-style] {
transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
}
.DrawerPopup[data-swiping],
.DrawerBackdrop[data-swiping] {
transition-duration: 0ms;
}
```
## API reference
### Root
Groups all parts of the drawer.
Doesn't render its own HTML element.
**Root Props:**
| Prop | Type | Default | Description |
| :---------------------- | :------------------------------------------------------------------------------------------------------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| defaultOpen | `boolean` | `false` | Whether the drawer is initially open. To render a controlled drawer, use the `open` prop instead. |
| open | `boolean` | - | Whether the drawer is currently open. |
| onOpenChange | `((open: boolean, eventDetails: Drawer.Root.ChangeEventDetails) => void)` | - | Event handler called when the drawer is opened or closed. |
| snapPoints | `DrawerSnapPoint[]` | - | Snap points used to position the drawer.
Use numbers between 0 and 1 to represent fractions of the viewport height,
numbers greater than 1 as pixel values, or strings in `px`/`rem` units
(for example, `'148px'` or `'30rem'`). |
| defaultSnapPoint | `DrawerSnapPoint \| null` | - | The initial snap point value when uncontrolled. |
| snapPoint | `DrawerSnapPoint \| null` | - | The currently active snap point. Use with `onSnapPointChange` to control the snap point. |
| onSnapPointChange | `((snapPoint: DrawerSnapPoint \| null, eventDetails: Drawer.Root.SnapPointChangeEventDetails) => void)` | - | Callback fired when the snap point changes. |
| actionsRef | `React.RefObject` | - | A ref to imperative actions. `unmount`: When specified, the drawer will not be unmounted when closed.
Instead, the `unmount` function must be called to unmount the drawer manually.
Useful when the drawer's animation is controlled by an external library.`close`: Closes the drawer imperatively when called. |
| defaultTriggerId | `string \| null` | - | ID of the trigger that the drawer is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer. |
| disablePointerDismissal | `boolean` | `false` | Determines whether the drawer should close on outside clicks. |
| handle | `Drawer.Handle` | - | A handle to associate the drawer with a trigger.
If specified, allows detached triggers to control the drawer's open state.
Can be created with the Drawer.createHandle() method. |
| modal | `boolean \| 'trap-focus'` | `true` | Determines if the drawer enters a modal state when open. `true`: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed.`'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the drawer is opened or closed. |
| snapToSequentialPoints | `boolean` | `false` | Disables velocity-based snap skipping so drag distance determines the next snap point. |
| swipeDirection | `DrawerSwipeDirection` | `'down'` | The swipe direction used to dismiss the drawer. |
| triggerId | `string \| null` | - | ID of the trigger that the drawer is associated with.
This is useful in conjunction with the `open` prop to create a controlled drawer.
There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set). |
| children | `React.ReactNode \| PayloadChildRenderFunction` | - | The content of the drawer. |
### Root.Props
Re-export of [Root](/react/components/drawer.md) props.
### Root.State
```typescript
type DrawerRootState = {};
```
### Root.Actions
```typescript
type DrawerRootActions = { unmount: () => void; close: () => void };
```
### Root.ChangeEventReason
```typescript
type DrawerRootChangeEventReason =
| 'trigger-press'
| 'outside-press'
| 'escape-key'
| 'close-watcher'
| 'close-press'
| 'focus-out'
| 'imperative-action'
| 'swipe'
| 'none';
```
### Root.ChangeEventDetails
```typescript
type DrawerRootChangeEventDetails = (
| { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
| { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
| { reason: 'escape-key'; event: KeyboardEvent }
| { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
| { reason: 'imperative-action'; event: Event }
| { reason: 'none'; event: Event }
| { reason: 'close-watcher'; event: Event }
| { reason: 'swipe'; event: TouchEvent | PointerEvent }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
preventUnmountOnClose: preventUnmountOnClose;
};
```
### Root.SnapPoint
```typescript
type DrawerRootSnapPoint = number | string;
```
### Root.SnapPointChangeEventDetails
```typescript
type DrawerRootSnapPointChangeEventDetails = (
| { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
| { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
| { reason: 'escape-key'; event: KeyboardEvent }
| { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
| { reason: 'imperative-action'; event: Event }
| { reason: 'none'; event: Event }
| { reason: 'close-watcher'; event: Event }
| { reason: 'swipe'; event: TouchEvent | PointerEvent }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
};
```
### Root.SnapPointChangeEventReason
```typescript
type DrawerRootSnapPointChangeEventReason =
| 'trigger-press'
| 'outside-press'
| 'escape-key'
| 'close-watcher'
| 'close-press'
| 'focus-out'
| 'imperative-action'
| 'swipe'
| 'none';
```
### Provider
Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
Doesn't render its own HTML element.
**Provider Props:**
| Prop | Type | Default | Description |
| :------- | :---------------- | :------ | :---------- |
| children | `React.ReactNode` | - | - |
### Provider.Props
Re-export of [Provider](/react/components/drawer.md) props.
### Provider.State
```typescript
type DrawerProviderState = {};
```
### Trigger
A button that opens the drawer.
Renders a `