}>
Cancel
)
}
```
## Installation
```bash
npx @arctis-sh/@arctis-sh/ui@latest add drawer
```
Add the following to your global styles. On iOS Safari, the absolutely positioned overlay needs a positioned `body` to cover the viewport after scrolling. This project already sets `position: relative` on `html` and `body` in `globals.css`.
```css
body {
position: relative;
}
```
## Usage
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
```
```tsx
}>
Open
Discard draft?Unsaved changes will be lost.
{/* Content here */}
}>
Cancel
```
## Composition
```tree
Drawer
├── DrawerTrigger
└── DrawerContent
├── DrawerHeader
│ ├── DrawerTitle
│ └── DrawerDescription
└── DrawerFooter
```
`DrawerContent` composes the portal, overlay, viewport, and popup from Base UI. For lower-level control, `DrawerPortal`, `DrawerOverlay`, and `DrawerSwipeHandle` are also exported.
## Custom Sizes
A vertical drawer sizes itself to its content and is capped at `calc(100dvh - 6rem)` by default. A side drawer spans `75%` of the viewport width, or `24rem` on larger screens.
Set a custom vertical drawer height with `h-*` and `max-h-*` utilities on `DrawerContent`.
```tsx
...
```
Set a custom side drawer width with `w-*` and `max-w-*` utilities on `DrawerContent`.
```tsx
...
```
When the same component renders in multiple directions, scope an override to one axis using the `data-[swipe-axis=*]` variants.
```tsx
...
```
For a scrollable region, make the scroll container a flex item. Avoid `h-full`; it does not resolve inside a content-sized drawer.
```tsx
...
{/* Scrollable content */}
...
```
## Styling
The drawer exposes CSS variables for lower-level styling. Set sizing variables on `DrawerContent` and the overlay variable on `[data-slot=drawer-overlay]`.
| Variable | Default | Description |
| --- | --- | --- |
| `--drawer-inset` | `0.5rem` | Floats the drawer from the viewport edges. |
| `--drawer-bleed-background` | `transparent` | Fills the gap behind the drawer on swipe overshoot. |
| `--drawer-overlay-min-opacity` | `0` | Minimum overlay opacity. Defaults to `0.5` when snap points are active. |
The drawer also sets data attributes on the popup (`data-slot="drawer-popup"`) you can target with variants such as `data-[swipe-direction=down]:` on `DrawerContent`, or `group-data-[swipe-axis=y]/drawer-popup:` on its descendants.
| Attribute | Values | Set when |
| --- | --- | --- |
| `data-swipe-direction` | `up`, `right`, `down`, `left` | Always. |
| `data-swipe-axis` | `x`, `y` | Always. |
| `data-snap-points` | Present | The drawer has snap points. |
| `data-expanded` | Present | The drawer is at the full snap point. |
| `data-swiping` | Present | A swipe is in progress. |
| `data-nested-drawer-open` | Present | A nested drawer is open on top. |
## Position
Use the `swipeDirection` prop to set the side of the drawer.
Choose `up`, `right`, `down`, or `left`.
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function Example() {
return (
}>
Open Left Drawer
Move GoalSet your daily activity goal.
}>Close
)
}
```
## Swipe Handle
Pass `showSwipeHandle` on `Drawer` to render a drag handle on the swipe edge.
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function Example() {
return (
}>
Open Drawer
DrawerDrawer with a swipe handle.
}>Close
)
}
```
## Nested
Open a drawer from inside another. Parent drawers stay mounted and stack behind the active drawer.
```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"
function useIsMobile(query = "(max-width: 767px)") {
const [isMobile, setIsMobile] = React.useState(false)
React.useEffect(() => {
const media = window.matchMedia(query)
const onChange = () => setIsMobile(media.matches)
onChange()
media.addEventListener("change", onChange)
return () => media.removeEventListener("change", onChange)
}, [query])
return isMobile
}
export function Example() {
const isMobile = useIsMobile()
const swipeDirection = isMobile ? "down" : "right"
return (
}>
Open Drawer
Drawer
Open another drawer from the same direction.
}>
Open Nested Drawer
Nested Drawer
The parent drawer stays mounted behind this one.
}>
Open Third Drawer
Third Drawer
Two drawers are stacked behind this one.
}>
Open Fourth Drawer
Fourth Drawer
This is the frontmost drawer in the stack.
}
>
Close
}
>
Close
}>
Close
}>
Close
)
}
```
## Non Modal
Set `modal={false}` to allow interaction with the rest of the page while the drawer is open. Combine with `disablePointerDismissal` to prevent the drawer from closing on outside presses. Use `modal="trap-focus"` to keep focus inside the drawer while leaving scroll and pointer interaction unrestricted.
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export function Example() {
return (
}>
Non Modal
Non Modal Drawer
}>Close
)
}
```
## Snap Points
Use `snapPoints` to define preset heights for a vertical drawer. Numbers from `0` to `1` are viewport fractions; numbers greater than `1` are pixels. Strings support `px` and `rem`.
Track the active snap point with the controlled `snapPoint` and `onSnapPointChange` props. At the full snap point, the drawer gets a `data-expanded` attribute you can style with the `data-expanded:` variant.
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
const SNAP_POINTS = ["31rem", 1]
export function Example() {
return (
}>
Open Snap Drawer
Snap points
Drag the drawer to snap between a compact peek and a near
full-height view.