Drawer migration from Vaul to Base UI
The Aria drawer now uses Base UI instead of Vaul. Key migration steps:
1. Update dependency from: npm install vaul to: npm install @base-ui/react
2. Replace direction prop with swipeDirection prop. Use down instead of bottom, and up instead of top. left and right stay the same.
3. Replace asChild with render prop. For DrawerTrigger, pass the trigger element to the render prop. For DrawerClose, pass the close element to the render prop.
4. Update snap point props: rename activeSnapPoint to snapPoint, rename setActiveSnapPoint to onSnapPointChange, and rename snapToSequentialPoint to snapToSequentialPoints.
5. Update animation and focus props: onAnimationEnd becomes onOpenChangeComplete, and onOpenAutoFocus becomes initialFocus.
6. Vaul-only props like handleOnly, repositionInputs, and shouldScaleBackground do not have one-to-one replacements. Use Base UI props such as disablePointerDismissal, modal, snapPoints, or controlled open state.
7. Replace dismissible={false} with disablePointerDismissal.
8. Update data attribute selectors: replace data-[vaul-drawer-direction=bottom] with data-[swipe-direction=down]. Base UI also exposes data-swiping, data-starting-style, and data-ending-style for swipe and transition states.
Drawer nested drawers
Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer.
Drawer migration from Vaul to Base UI
The base drawer now uses Base UI instead of Vaul. Update the dependency from npm install vaul to npm install @base-ui/react
Drawer direction prop migration
Replace direction with swipeDirection. Use down instead of bottom, and up instead of top. left and right stay the same. Example: <Drawer swipeDirection="down"> instead of <Drawer direction="bottom">
Drawer asChild to render migration
Replace asChild with render. For DrawerTrigger, pass the trigger element to the render prop: <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>. For DrawerClose, pass the close element to the render prop: <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
Drawer snap point props migration
If using snap points, rename controlled snap point props: activeSnapPoint to snapPoint, setActiveSnapPoint to onSnapPointChange. Also rename snapToSequentialPoint to snapToSequentialPoints.
Drawer animation props migration
Replace onAnimationEnd={(open) => setDone(open)} with onOpenChangeComplete={(open) => setDone(open)}
Drawer focus props migration
Replace <DrawerContent onOpenAutoFocus={(event) => event.preventDefault()}> with <DrawerContent initialFocus={false}>
Drawer Vaul-specific props removal
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.
Drawer dismissible migration
Replace dismissible={false} with disablePointerDismissal
Drawer data attribute selectors migration
Replace Vaul's data-vaul-drawer-direction selectors with Base UI's data-swipe-direction selectors. Example: data-[swipe-direction=down]:max-h-[50vh] instead of data-[vaul-drawer-direction=bottom]:max-h-[50vh]
Drawer scrollable content
To make a region of the drawer scrollable, make the scroll container a flex item. Avoid h-full, which does not resolve inside a content-sized drawer. Example: <div className="flex-1 overflow-y-auto p-4">{/* Scrollable content */}</div>
Drawer import statement
Import drawer components with: import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
Drawer basic usage example
Example of a basic drawer component: <Drawer><DrawerTrigger>Open</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Are you absolutely sure?</DrawerTitle><DrawerDescription>This action cannot be undone.</DrawerDescription></DrawerHeader><DrawerFooter><Button>Submit</Button><DrawerClose><Button variant="outline">Cancel</Button></DrawerClose></DrawerFooter></DrawerContent></Drawer>
Drawer combined with Dialog for responsive behavior
Drawer can be combined with the Dialog component to create a responsive dialog that renders a Dialog component on desktop and a Drawer on mobile.