}>Close ); } export default DrawerWithSides; ``` ## Swipe Handle Use `showSwipeHandle` on `Drawer` to render a swipe handle. ### Example: drawer-swipe-handle ```tsx "use client"; import { Button } from "@workspace/ui/components/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@workspace/ui/components/drawer"; export function DrawerSwipeHandle() { return ( }> Open Drawer Drawer Drawer with a swipe handle.

}>Close ); } export default DrawerSwipeHandle; ``` ## Nested Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer. ### Example: drawer-nested ```tsx "use client"; import { Button } from "@workspace/ui/components/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@workspace/ui/components/drawer"; import { useIsMobile } from "@workspace/ui/hooks/use-mobile"; export function DrawerNested() { 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 ); } export default DrawerNested; ``` ## 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. ### Example: drawer-non-modal ```tsx import { Button } from "@workspace/ui/components/button"; import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@workspace/ui/components/drawer"; export function DrawerNonModal() { return ( }> Non Modal Non Modal Drawer

}>Close ); } export default DrawerNonModal; ``` ## Snap Points Use `snapPoints` to snap a drawer to preset heights. Numbers between `0` and `1` represent fractions of the viewport. Numbers greater than `1` are treated as pixel values. String values support `px` and `rem` units. Snap points apply to vertical drawers. 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. ### Example: drawer-snap-points ```tsx "use client"; import { Button } from "@workspace/ui/components/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@workspace/ui/components/drawer"; const SNAP_POINTS = ["31rem", 1]; export function DrawerSnapPoints() { return ( }> Open Snap Drawer Snap points Drag the drawer to snap between a compact peek and a near full-height view.

}>Close ); } export default DrawerSnapPoints; ``` ## Responsive You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile. ### Example: drawer-dialog ```tsx "use client"; import { Button } from "@workspace/ui/components/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@workspace/ui/components/dialog"; import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@workspace/ui/components/drawer"; import { Input } from "@workspace/ui/components/input"; import { Label } from "@workspace/ui/components/label"; import { cn } from "cn"; import * as React from "react"; import { useId as usePreviewId } from "react"; import { useMediaQuery } from "./support"; export function DrawerDialogDemo() { const [open, setOpen] = React.useState(false); const isDesktop = useMediaQuery("(min-width: 768px)"); if (isDesktop) { return ( ); } return ( }> Edit Profile Edit profile Make changes to your profile here. Click save when you're done. ); } function ProfileForm({ className }: React.ComponentProps<"form">) { const previewId = usePreviewId(); return ( ); } export default DrawerDialogDemo; ``` ## Migrating from Vaul The base drawer now uses [Base UI](https://base-ui.com/react/components/drawer) instead of Vaul. If you installed the previous base drawer, update your usage to the Base UI API. ### Update the dependency. ```diff - npm install vaul + npm install @base-ui/react ``` ### Replace `direction` with `swipeDirection`. Use `down` instead of `bottom`, and `up` instead of `top`. `left` and `right` stay the same. ```diff - + ``` ### Replace `asChild` with `render`. For `DrawerTrigger`, pass the trigger element to the `render` prop. ```diff - - - + }> + Open + ``` For `DrawerClose`, pass the close element to the `render` prop. ```diff - - - + }> + Cancel + ``` ### Update snap point props. If you use snap points, rename the controlled snap point props and the sequential snap point prop. ```diff ``` ### Update animation and focus props. ```diff - setDone(open)}> + setDone(open)}> ``` ```diff - event.preventDefault()}> + ``` ### Review Vaul-only props. Vaul props like `handleOnly`, `repositionInputs`, and `shouldScaleBackground` do not have one-to-one replacements in the base drawer API. Use Base UI props such as `disablePointerDismissal`, `modal`, `snapPoints`, or controlled `open` state for the behavior you need. ```diff - + ``` ```diff - + ``` ### Update custom data attribute selectors. Replace Vaul's `data-vaul-drawer-direction` selectors with Base UI's `data-swipe-direction` selectors. ```diff - + ``` Base UI also exposes attributes like `data-swiping`, `data-starting-style`, and `data-ending-style` for swipe and transition states. Descendants inside `DrawerContent` can use `group-data-[swipe-axis=x]/drawer-popup` and `group-data-[swipe-axis=y]/drawer-popup` for axis-specific styling. ## API Reference See the [Base UI documentation](https://base-ui.com/react/components/drawer) for the full API reference. - [Documentation](https://base-ui.com/react/components/drawer) - [API reference](https://base-ui.com/react/components/drawer#api-reference)