Drawer

Open a panel from any edge. Built on Base UI, it supports swipe-to-dismiss, snap points, and nested drawers.

tsx

1"use client"23import * as React from "react"4import { Badge } from "@/components/ui/badge"5import { Button } from "@/components/ui/button"6import {7  Drawer,8  DrawerClose,9  DrawerContent,10  DrawerDescription,11  DrawerFooter,12  DrawerHeader,13  DrawerTitle,14  DrawerTrigger,15} from "@/components/ui/drawer"16import {17  Field,18  FieldContent,19  FieldDescription,20  FieldLabel,21  FieldTitle,22} from "@/components/ui/field"23import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"2425const deliveryTimes = [26  {27    value: "asap",28    id: "delivery-asap",29    label: "Standard delivery",30    description: "25-35 min · Driver assigned now",31    badge: "Fastest",32  },33  {34    value: "5-00",35    id: "delivery-5-00",36    label: "5:00 PM - 5:15 PM",37    description: "Prep starts at 4:45 PM",38  },39  {40    value: "5-30",41    id: "delivery-5-30",42    label: "5:30 PM - 5:45 PM",43    description: "Good if you're heading home",44  },45  {46    value: "6-00",47    id: "delivery-6-00",48    label: "6:00 PM - 6:15 PM",49    description: "Most popular · High demand",50  },51  {52    value: "6-30",53    id: "delivery-6-30",54    label: "6:30 PM - 6:45 PM",55    description: "Last slot before kitchen closes",56  },57]5859function useIsMobile(query = "(max-width: 767px)") {60  const [isMobile, setIsMobile] = React.useState(false)6162  React.useEffect(() => {63    const media = window.matchMedia(query)64    const onChange = () => setIsMobile(media.matches)65    onChange()66    media.addEventListener("change", onChange)67    return () => media.removeEventListener("change", onChange)68  }, [query])6970  return isMobile71}7273export function Example() {74  const [open, setOpen] = React.useState(false)75  const [deliveryTime, setDeliveryTime] = React.useState("asap")76  const isMobile = useIsMobile()7778  return (79    <Drawer80      open={open}81      onOpenChange={setOpen}82      showSwipeHandle={isMobile}83      swipeDirection={isMobile ? "down" : "right"}84    >85      <DrawerTrigger render={<Button variant="secondary" />}>86        Open Drawer87      </DrawerTrigger>88      <DrawerContent>89        <DrawerHeader>90          <DrawerTitle>Pick a delivery time</DrawerTitle>91          <DrawerDescription>92            We&apos;ll prepare your order as soon as possible.93          </DrawerDescription>94        </DrawerHeader>95        <div className="flex-1 overflow-y-auto p-4">96          <RadioGroup97            value={deliveryTime}98            onValueChange={setDeliveryTime}99            className="gap-2"100          >101            {deliveryTimes.map((time) => (102              <FieldLabel key={time.value} htmlFor={time.id}>103                <Field orientation="horizontal">104                  <FieldContent>105                    <FieldTitle className="flex items-center gap-2">106                      {time.label}107                      {time.badge ? (108                        <Badge variant="secondary">{time.badge}</Badge>109                      ) : null}110                    </FieldTitle>111                    <FieldDescription>{time.description}</FieldDescription>112                  </FieldContent>113                  <RadioGroupItem value={time.value} id={time.id} />114                </Field>115              </FieldLabel>116            ))}117          </RadioGroup>118        </div>119        <DrawerFooter>120          <Button onClick={() => setOpen(false)}>Confirm Delivery Time</Button>121          <DrawerClose render={<Button variant="outline" />}>122            Cancel123          </DrawerClose>124        </DrawerFooter>125      </DrawerContent>126    </Drawer>127  )128}

Installation

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.

1body {2  position: relative;3}

Usage

1import { Button } from "@/components/ui/button"2import {3  Drawer,4  DrawerClose,5  DrawerContent,6  DrawerDescription,7  DrawerFooter,8  DrawerHeader,9  DrawerTitle,10  DrawerTrigger,11} from "@/components/ui/drawer"

1<Drawer>2  <DrawerTrigger render={<Button variant="outline" />}>3    Open4  </DrawerTrigger>5  <DrawerContent>6    <DrawerHeader>7      <DrawerTitle>Discard draft?</DrawerTitle>8      <DrawerDescription>Unsaved changes will be lost.</DrawerDescription>9    </DrawerHeader>10    <div className="p-4">{/* Content here */}</div>11    <DrawerFooter>12      <Button>Submit</Button>13      <DrawerClose render={<Button variant="outline" />}>14        Cancel15      </DrawerClose>16    </DrawerFooter>17  </DrawerContent>18</Drawer>

Composition

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.

1<DrawerContent className="h-[50vh]">2  ...3</DrawerContent>

Set a custom side drawer width with w-* and max-w-* utilities on DrawerContent.

1<DrawerContent className="w-96">2  ...3</DrawerContent>

When the same component renders in multiple directions, scope an override to one axis using the data-[swipe-axis=*] variants.

1<DrawerContent className="data-[swipe-axis=y]:max-h-[50vh] data-[swipe-axis=x]:w-96">2  ...3</DrawerContent>

For a scrollable region, make the scroll container a flex item. Avoid h-full; it does not resolve inside a content-sized drawer.

1<DrawerContent>2  <DrawerHeader>...</DrawerHeader>3  <div className="flex-1 overflow-y-auto p-4">{/* Scrollable content */}</div>4  <DrawerFooter>...</DrawerFooter>5</DrawerContent>

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

1import { Button } from "@/components/ui/button"2import {3  Drawer,4  DrawerClose,5  DrawerContent,6  DrawerDescription,7  DrawerFooter,8  DrawerHeader,9  DrawerTitle,10  DrawerTrigger,11} from "@/components/ui/drawer"1213export function Example() {14  return (15    <Drawer swipeDirection="left">16      <DrawerTrigger render={<Button variant="secondary" />}>17        Open Left Drawer18      </DrawerTrigger>19      <DrawerContent>20        <DrawerHeader>21          <DrawerTitle>Move Goal</DrawerTitle>22          <DrawerDescription>Set your daily activity goal.</DrawerDescription>23        </DrawerHeader>24        <div className="min-h-0 flex-1 p-4">25          <div className="h-full w-full rounded-md bg-secondary" />26        </div>27        <DrawerFooter>28          <DrawerClose render={<Button />}>Close</DrawerClose>29        </DrawerFooter>30      </DrawerContent>31    </Drawer>32  )33}

Swipe Handle

Pass showSwipeHandle on Drawer to render a drag handle on the swipe edge.

tsx

1import { Button } from "@/components/ui/button"2import {3  Drawer,4  DrawerClose,5  DrawerContent,6  DrawerDescription,7  DrawerFooter,8  DrawerHeader,9  DrawerTitle,10  DrawerTrigger,11} from "@/components/ui/drawer"1213export function Example() {14  return (15    <Drawer showSwipeHandle>16      <DrawerTrigger render={<Button variant="secondary" />}>17        Open Drawer18      </DrawerTrigger>19      <DrawerContent>20        <DrawerHeader>21          <DrawerTitle>Drawer</DrawerTitle>22          <DrawerDescription>Drawer with a swipe handle.</DrawerDescription>23        </DrawerHeader>24        <div className="flex-1 p-4">25          <div className="h-80 w-full rounded-md bg-secondary" />26        </div>27        <DrawerFooter>28          <DrawerClose render={<Button />}>Close</DrawerClose>29        </DrawerFooter>30      </DrawerContent>31    </Drawer>32  )33}

Nested

Open a drawer from inside another. Parent drawers stay mounted and stack behind the active drawer.

tsx

1"use client"23import * as React from "react"4import { Button } from "@/components/ui/button"5import {6  Drawer,7  DrawerClose,8  DrawerContent,9  DrawerDescription,10  DrawerFooter,11  DrawerHeader,12  DrawerTitle,13  DrawerTrigger,14} from "@/components/ui/drawer"1516function useIsMobile(query = "(max-width: 767px)") {17  const [isMobile, setIsMobile] = React.useState(false)1819  React.useEffect(() => {20    const media = window.matchMedia(query)21    const onChange = () => setIsMobile(media.matches)22    onChange()23    media.addEventListener("change", onChange)24    return () => media.removeEventListener("change", onChange)25  }, [query])2627  return isMobile28}2930export function Example() {31  const isMobile = useIsMobile()32  const swipeDirection = isMobile ? "down" : "right"3334  return (35    <Drawer showSwipeHandle={isMobile} swipeDirection={swipeDirection}>36      <DrawerTrigger render={<Button variant="secondary" />}>37        Open Drawer38      </DrawerTrigger>39      <DrawerContent>40        <DrawerHeader>41          <DrawerTitle>Drawer</DrawerTitle>42          <DrawerDescription>43            Open another drawer from the same direction.44          </DrawerDescription>45        </DrawerHeader>46        <div className="min-h-0 flex-1 p-4">47          <div className="h-full w-full rounded-md bg-secondary group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:h-auto" />48        </div>49        <DrawerFooter>50          <Drawer showSwipeHandle={isMobile} swipeDirection={swipeDirection}>51            <DrawerTrigger render={<Button variant="outline" />}>52              Open Nested Drawer53            </DrawerTrigger>54            <DrawerContent>55              <DrawerHeader>56                <DrawerTitle>Nested Drawer</DrawerTitle>57                <DrawerDescription>58                  The parent drawer stays mounted behind this one.59                </DrawerDescription>60              </DrawerHeader>61              <div className="min-h-0 flex-1 p-4">62                <div className="h-full w-full rounded-md bg-secondary group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:h-auto" />63              </div>64              <DrawerFooter>65                <Drawer66                  showSwipeHandle={isMobile}67                  swipeDirection={swipeDirection}68                >69                  <DrawerTrigger render={<Button variant="outline" />}>70                    Open Third Drawer71                  </DrawerTrigger>72                  <DrawerContent>73                    <DrawerHeader>74                      <DrawerTitle>Third Drawer</DrawerTitle>75                      <DrawerDescription>76                        Two drawers are stacked behind this one.77                      </DrawerDescription>78                    </DrawerHeader>79                    <div className="min-h-0 flex-1 p-4">80                      <div className="h-full w-full rounded-md bg-secondary group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:h-auto" />81                    </div>82                    <DrawerFooter>83                      <Drawer84                        showSwipeHandle={isMobile}85                        swipeDirection={swipeDirection}86                      >87                        <DrawerTrigger render={<Button variant="outline" />}>88                          Open Fourth Drawer89                        </DrawerTrigger>90                        <DrawerContent>91                          <DrawerHeader>92                            <DrawerTitle>Fourth Drawer</DrawerTitle>93                            <DrawerDescription>94                              This is the frontmost drawer in the stack.95                            </DrawerDescription>96                          </DrawerHeader>97                          <div className="min-h-0 flex-1 p-4">98                            <div className="h-full w-full rounded-md bg-secondary group-data-[swipe-axis=y]/drawer-popup:aspect-video group-data-[swipe-axis=y]/drawer-popup:h-auto" />99                          </div>100                          <DrawerFooter>101                            <DrawerClose102                              render={<Button variant="outline" />}103                            >104                              Close105                            </DrawerClose>106                          </DrawerFooter>107                        </DrawerContent>108                      </Drawer>109                      <DrawerClose110                        render={<Button variant="outline" />}111                      >112                        Close113                      </DrawerClose>114                    </DrawerFooter>115                  </DrawerContent>116                </Drawer>117                <DrawerClose render={<Button variant="outline" />}>118                  Close119                </DrawerClose>120              </DrawerFooter>121            </DrawerContent>122          </Drawer>123          <DrawerClose render={<Button variant="outline" />}>124            Close125          </DrawerClose>126        </DrawerFooter>127      </DrawerContent>128    </Drawer>129  )130}

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

1import { Button } from "@/components/ui/button"2import {3  Drawer,4  DrawerClose,5  DrawerContent,6  DrawerFooter,7  DrawerHeader,8  DrawerTitle,9  DrawerTrigger,10} from "@/components/ui/drawer"1112export function Example() {13  return (14    <Drawer modal={false} disablePointerDismissal swipeDirection="right">15      <DrawerTrigger render={<Button variant="outline" />}>16        Non Modal17      </DrawerTrigger>18      <DrawerContent>19        <DrawerHeader>20          <DrawerTitle>Non Modal Drawer</DrawerTitle>21        </DrawerHeader>22        <div className="min-h-0 flex-1 p-4">23          <div className="h-full w-full rounded-md bg-secondary" />24        </div>25        <DrawerFooter>26          <DrawerClose render={<Button />}>Close</DrawerClose>27        </DrawerFooter>28      </DrawerContent>29    </Drawer>30  )31}

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

1import { Button } from "@/components/ui/button"2import {3  Drawer,4  DrawerClose,5  DrawerContent,6  DrawerDescription,7  DrawerFooter,8  DrawerHeader,9  DrawerTitle,10  DrawerTrigger,11} from "@/components/ui/drawer"1213const SNAP_POINTS = ["31rem", 1]1415export function Example() {16  return (17    <Drawer snapPoints={SNAP_POINTS} showSwipeHandle>18      <DrawerTrigger render={<Button variant="outline" />}>19        Open Snap Drawer20      </DrawerTrigger>21      <DrawerContent>22        <DrawerHeader>23          <DrawerTitle>Snap points</DrawerTitle>24          <DrawerDescription>25            Drag the drawer to snap between a compact peek and a near26            full-height view.27          </DrawerDescription>28        </DrawerHeader>29        <div className="flex-1 p-4">30          <div className="h-80 w-full rounded-md bg-secondary" />31        </div>32        <DrawerFooter>33          <DrawerClose render={<Button />}>Close</DrawerClose>34        </DrawerFooter>35      </DrawerContent>36    </Drawer>37  )38}

API Reference

Prop	Type	Default
swipeDirection	"up" \| "right" \| "down" \| "left"	"down"
showSwipeHandle	boolean	false
modal	boolean \| "trap-focus"	true
disablePointerDismissal	boolean	false
snapPoints	(number \| string)[]	—
snapPoint	number \| string \| null	—
onSnapPointChange	(snapPoint: number \| string \| null) => void	—
snapToSequentialPoints	boolean	false
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
onOpenChangeComplete	(open: boolean) => void	—

1<Drawer swipeDirection="down" showSwipeHandle snapPoints={[0.5, 1]}>2  <DrawerTrigger render={<Button variant="outline" />}>3    Open4  </DrawerTrigger>5  <DrawerContent>...</DrawerContent>6</Drawer>

DrawerTrigger

Renders a native button by default. Pass a Button (or other element) with the Base UI render prop.

Prop	Type	Default
className	string	—
render	React.ReactElement	—

1<DrawerTrigger render={<Button variant="outline" />}>2  Open3</DrawerTrigger>

DrawerClose

Closes the drawer. Prefer render={<Button … />} so close actions match your buttons.

Prop	Type	Default
className	string	—
render	React.ReactElement	—

1<DrawerClose render={<Button variant="outline" />}>2  Cancel3</DrawerClose>

DrawerContent

Floating panel inset from the viewport edge by --drawer-inset, with a full radius and border. className is applied to the popup.

Prop	Type	Default
className	string	—

1<DrawerContent className="data-[swipe-axis=y]:max-h-[50vh]">2  ...3</DrawerContent>

DrawerHeader

Prop	Type	Default
className	string	—

1<DrawerHeader>2  <DrawerTitle>Title</DrawerTitle>3  <DrawerDescription>Description</DrawerDescription>4</DrawerHeader>

DrawerFooter

Prop	Type	Default
className	string	—

1<DrawerFooter>2  <Button>Submit</Button>3  <DrawerClose render={<Button variant="outline" />}>4    Cancel5  </DrawerClose>6</DrawerFooter>

DrawerTitle

Prop	Type	Default
className	string	—

1<DrawerTitle>Title</DrawerTitle>

DrawerDescription

Prop	Type	Default
className	string	—

1<DrawerDescription>Description</DrawerDescription>

DrawerPortal

Prop	Type	Default
container	HTMLElement	document.body

DrawerOverlay

Scrim behind the panel. Only rendered when modal is true.

Prop	Type	Default
className	string	—

DrawerSwipeHandle

Drag affordance on the swipe edge. Usually rendered via showSwipeHandle on Drawer.

Prop	Type	Default
className	string	—