drawer

Features

• Background Scaling: Scales the background when the drawer is open using [vaul-drawer-wrapper].
• Custom Close Threshold: Controls when the drawer should close based on swipe distance (0 to 1).
• Scroll Lock Timeout: Sets a delay for drawer drag after scrolling (default: 500ms).
• Snap Points: Defines percentage or pixel values for drawer screen coverage.
• Fade Effect: Applies a fade effect from a specific snap point.
• Modal Control: Allows interaction with elements outside the drawer (default: true).
• Handle-Only Dragging: Restricts drawer dragging to <Drawer.Handle /> (default: false).
• Directional Control: Opens drawer from top, bottom, left, or right (default: bottom).
• Scroll Restoration Prevention: Avoids restoring scroll after navigation within the drawer (default: true).
• Disable Scroll Prevention: Disables scroll prevention to fix autofocus issues (default: true).
• No Body Styles: Prevents Vaul from applying styles to the body (default: false).
• Background Color on Scale: Controls background color change when the drawer opens (default: true).
• No Drag Attribute: Prevents drawer dragging when interacting with elements marked [data-vaul-no-drag].

About

Drawer is built on Vaul by emilkowalski_.

Installation

npx duck-ui@latest add drawer

npx duck-ui@latest add drawer

Usage

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui'

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui'

<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>
  <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>

Examples

Drawer

using the normal one.

Responsive Dialog

Use Dialog and Drawer together to create a responsive dialog. It renders Dialog on desktop and Drawer on mobile.

Non-dismissible

A non-dismissible drawer For cases when your drawer has to be always visible, Nothing will close it unless you make it controlled and close it programmatically.

Non-modal

Custom Drawer

API Reference

Drawer

• shouldScaleBackground (boolean, optional, default: true): Whether to scale the background when drawer is open.
• ...props (React.ComponentProps<typeof DrawerPrimitive.Root>): Native props for the drawer root.

Behavior:

• Root drawer component wrapping all drawer logic using vaul's Drawer.Root.
• Controls open state and background scaling.

DrawerTrigger

• Wrapper around DrawerPrimitive.Trigger.
• Used to toggle the drawer open or closed.

DrawerPortal

• Wrapper around DrawerPrimitive.Portal.
• Renders drawer content in a React Portal.

DrawerClose

• Wrapper around DrawerPrimitive.Close.
• Closes the drawer when clicked.

DrawerOverlay

• props (React.ComponentPropsWithRef<typeof DrawerPrimitive.Overlay>): Native overlay props.

Behavior:

• Fullscreen semi-transparent backdrop behind drawer content.

DrawerContent

• overlay (React.ComponentPropsWithRef<typeof DrawerOverlay>, optional): Props forwarded to overlay.
• props (React.ComponentPropsWithRef<typeof DrawerPrimitive.Content>): Native drawer content props.

Behavior:

• Contains the drawer panel content and overlay wrapped inside a portal.
• Has a drag handle bar for UX.

DrawerHeader

• props (React.HTMLAttributes<HTMLDivElement>): Native div props.

Behavior:

• Container for drawer header section, usually title and description.
• Grid layout with spacing.

DrawerFooter

• props (React.HTMLAttributes<HTMLDivElement>): Native div props.

Behavior:

• Footer container for buttons or actions.
• Flex layout with spacing.

DrawerTitle

• props (React.ComponentPropsWithRef<typeof DrawerPrimitive.Title>): Native title props.

Behavior:

• Styled heading for drawer title.

DrawerDescription

• props (React.ComponentPropsWithRef<typeof DrawerPrimitive.Description>): Native description props.

Behavior:

• Styled text description under the title.