# Drawer
> A panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers that stack.
Docs: https://hextaui.com/docs/drawer
Markdown: https://hextaui.com/docs/drawer.md
```tsx title="components/examples/drawer/demo.tsx"
"use client"
import * as React from "react"
import { IconMinus, IconPlus } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
import { NumberFlow } from "@/components/ui/number-flow"
export function DrawerDemo() {
const [goal, setGoal] = React.useState(350)
return (
}>
Set daily goal
{directions.map(({ value, label }) => (
}>
{label}
Swipe {value} to close
The drawer follows your finger and keeps the momentum when you
let go.
}>
Close
))}
)
}
```
### Snap points
Pass `snapPoints` to rest a bottom drawer at preset heights. Numbers from 0 to 1 are fractions of the viewport, larger numbers are pixels, and strings take px or rem. The visible part always fits its content, so nothing hides below the screen.
```tsx title="components/examples/drawer/snap-points.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerBody,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
const snapPoints = ["20rem", 1]
const places = [
"Blue Bottle Coffee",
"Tartine Bakery",
"Mission Dolores Park",
"Ferry Building",
"Golden Gate Park",
"Lands End Trail",
"Twin Peaks",
"Coit Tower",
"Alamo Square",
"Baker Beach",
"Crissy Field",
"Japanese Tea Garden",
]
export function DrawerSnapPoints() {
return (
}>
Nearby places
Nearby places
Drag up to see the full list, or down to close.
{places.map((place) => (
{place}
))}
)
}
```
### Scrollable content
`` scrolls on its own, so the header and footer stay in place. Swiping only starts once the body is scrolled back to the top.
```tsx title="components/examples/drawer/scrollable.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerBody,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
const sections = Array.from({ length: 12 }, (_, index) => index + 1)
export function DrawerScrollable() {
return (
}>
Terms of service
Terms of serviceLast updated October 2026.
{sections.map((section) => (
{section}. By using the service you agree to these terms. We may
update them from time to time, and we will let you know when
something important changes. Keep your account details safe and
tell us if you think someone else has access.
))}
}>Accept
}>
Decline
)
}
```
### Forms and the keyboard
Wrap `` in `` when a bottom drawer holds text fields. On phones, the focused field scrolls into view above the software keyboard instead of hiding behind it. Keep the fields in `` so the header and footer stay put.
```tsx title="components/examples/drawer/keyboard.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerBody,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
DrawerVirtualKeyboardProvider,
} from "@/components/ui/drawer"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
export function DrawerKeyboard() {
return (
}>
Delivery details
Delivery details
Tap a field on your phone. It stays above the keyboard.
NamePhoneStreet addressApartmentCityPostal code}>Save address
)
}
```
### Nested
A drawer opened from a drawer on the same edge stacks on top. The ones behind shrink, peek out above it and follow your finger as you swipe the top one away.
```tsx title="components/examples/drawer/nested.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function DrawerNested() {
return (
}>
Choose a plan
Choose a plan
Compare plans, then open the details of the one you like.
}>Pro plan details
Pro plan
The first drawer steps back behind this one.
}>Checkout
Checkout
Swipe down to go back one step.
}>
Back
}>
Back
}>Close
)
}
```
### Confirm from a drawer
Dialogs, alert dialogs, sheets and drawers on another edge layer on top instead of stacking. The drawer steps back and a lighter backdrop covers it.
```tsx title="components/examples/drawer/confirm.tsx"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function DrawerConfirm() {
return (
}>
Photo options
IMG_2048.heicTaken on October 3, 2026.}>Share
}>
Delete photo
Delete “IMG_2048.heic”?
It will be removed from all your devices.
Cancel
Delete
)
}
```
### Responsive
Change `swipeDirection` with a media query to show a side panel on desktop and a bottom sheet on phones.
```tsx title="components/examples/drawer/responsive.tsx"
"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
const query = "(min-width: 768px)"
function subscribe(onChange: () => void) {
const media = window.matchMedia(query)
media.addEventListener("change", onChange)
return () => media.removeEventListener("change", onChange)
}
function useIsDesktop() {
return React.useSyncExternalStore(
subscribe,
() => window.matchMedia(query).matches,
() => false
)
}
export function DrawerResponsive() {
const isDesktop = useIsDesktop()
return (
}>
Notifications
Notifications
A side panel on desktop and a bottom sheet on phones.
}>Close
)
}
```
### Non-modal
With `modal={false}` there is no backdrop, the page keeps scrolling and focus can leave the drawer.
```tsx title="components/examples/drawer/non-modal.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function DrawerNonModal() {
return (
}>
Open inspector
Inspector
The page stays scrollable and clickable while this is open.
}>Close
)
}
```
### Controlled
Pass `open` and `onOpenChange` to open it from anywhere, without a trigger.
```tsx title="components/examples/drawer/controlled.tsx"
"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer"
export function DrawerControlled() {
const [open, setOpen] = React.useState(false)
return (
<>
Controlled drawer
Opened from a plain button, without a trigger.
)
}
```
### Detached triggers
Share one drawer between several triggers with `createDrawerHandle`. Each trigger passes a `payload` that the drawer renders through a function child.
```tsx title="components/examples/drawer/detached.tsx"
"use client"
import { Button } from "@/components/ui/button"
import {
createDrawerHandle,
Drawer,
DrawerBody,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
const contacts = createDrawerHandle<{ name: string; email: string }>()
export function DrawerDetached() {
return (
)
}
```
### Right to left
Pass `dir="rtl"` to `` to mirror its content. `swipeDirection` names a physical edge, so `"left"` stays on the left and the handle stays on the inner edge.
```tsx title="components/examples/drawer/rtl.tsx"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function DrawerRtl() {
return (
}>
من الأسفل
تعديل الملف الشخصي
يتم حفظ التغييرات عند النقر على حفظ.
}>حفظ
}>
إلغاء
}>
من اليسار
القائمةاسحب إلى اليسار للإغلاق.}>
إغلاق
)
}
```
## Keyboard
| Key | Action |
| --- | --- |
| `Enter` `Space` | On the trigger, opens the drawer and moves focus inside it. |
| `Tab` `Shift + Tab` | Moves between focusable elements. Focus stays inside a modal drawer. |
| `Esc` | Closes the topmost drawer and returns focus to its trigger. |
## Accessibility
- The drawer is a dialog. `` labels it and `` describes it, so always include a title.
- Swiping is never the only way out: Escape, the backdrop and a `` button all close it too.
- The handle is decorative and hidden from assistive tech. With a mouse, text inside the drawer can be selected without dragging it.
- With reduced motion enabled, the drawer fades in and out instead of sliding. Dragging still follows the pointer.
## API reference
Built on the Base UI drawer. Every part accepts the props of the primitive it wraps.
### Drawer
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `swipeDirection` | `"up" \| "down" \| "left" \| "right"` | `"down"` | The edge it opens from and the direction that dismisses it. |
| `showSwipeHandle` | `boolean` | – | Shows the handle. Defaults to true for up and down, false for left and right. |
| `snapPoints` | `(number \| string)[]` | – | Heights a vertical drawer can rest at. 0–1 is a fraction of the viewport, >1 is pixels, strings take px or rem. |
| `snapPoint` | `number \| string \| null` | – | |
| `defaultSnapPoint` | `number \| string \| null` | – | |
| `onSnapPointChange` | `(snapPoint, details) => void` | – | |
| `defaultOpen` | `boolean` | `false` | |
| `open` | `boolean` | – | |
| `onOpenChange` | `(open: boolean, details) => void` | – | |
| `onOpenChangeComplete` | `(open: boolean) => void` | – | Called after the open or close animation ends. |
| `modal` | `boolean \| "trap-focus"` | `true` | The backdrop only renders when true. |
| `disablePointerDismissal` | `boolean` | `false` | Keep it open when the backdrop is clicked. |
| `handle` | `DrawerHandle` | – | |
| `children` | `ReactNode \| ({ payload }) => ReactNode` | – | |
### DrawerTrigger
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `DrawerHandle` | – | |
| `payload` | `Payload` | – | |
| `render` | `ReactElement \| (props, state) => ReactElement` | `