Docs
drawer

drawer

A customizable drawer component for React.

Docs

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.

Drawer new

using the new one.

Responsive Dialog

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

Responsive Dialog new

using the new wrapper.

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

  • shouldScaleBackground (boolean, default: true) - Scales the background when the drawer opens. Requires [data-vaul-drawer-wrapper].
  • closeThreshold (number) - Value (0-1) determining when the drawer should close.
  • scrollLockTimeout (number, default: 500) - Delay in milliseconds before allowing drag after scrolling.
  • snapPoints (array) - Defines the drawer's snap points in percentages or pixels.
  • fadeFromIndex (number) - Defines from which snap point the fade effect begins.
  • modal (boolean, default: true) - Allows interaction with elements outside the drawer when false.
  • handleOnly (boolean, default: false) - Restricts drawer dragging to <Drawer.Handle />.
  • direction (string, default: bottom) - Specifies drawer direction (top, bottom, left, right).
  • preventScrollRestoration (boolean, default: true) - Prevents scroll restoration when navigating inside the drawer.
  • disablePreventScroll (boolean, default: true) - Disables page scroll prevention when the drawer is open.
  • noBodyStyles (boolean, default: false) - Prevents Vaul from applying styles to the body.
  • setBackgroundColorOnScale (boolean, default: true) - Controls background color change when scaling the drawer.
  • [data-vaul-no-drag] - Prevents dragging the drawer when interacting with specific elements.

Drawer Subcomponents

DrawerTrigger

Directly exported from DrawerPrimitive.Trigger.

DrawerPortal

Directly exported from DrawerPrimitive.Portal.

DrawerClose

Directly exported from DrawerPrimitive.Close.

DrawerOverlay

Renders an overlay with default styling.

  • className (string) - Custom CSS classes.
  • ref - React ref.

DrawerContent

Wraps DrawerPrimitive.Content with additional styling and includes DrawerOverlay.

  • className (string) - Custom CSS classes.
  • children - Drawer content.
  • ref - React ref.

DrawerHeader

Renders a header section inside the drawer.

DrawerFooter

Renders a footer section inside the drawer.

DrawerTitle

Renders the title inside the drawer.

DrawerDescription

Renders a description inside the drawer.

Changelog

2025-2-14

  • Refactored API Reference: Improved clarity and formatting.
  • New Wrapper: New warapper normal and responsive.
  • Reorganized Features Section: Enhanced readability.
  • Condensed Installation Steps: Streamlined setup process.
  • Updated Examples: Added better demonstrations of Drawer in action.
  • Optimized Code Blocks: Improved code snippet presentation.
ButtonHover Card