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 @gentleduck/cli add drawer
npx @gentleduck/cli 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.
DialogDropdown Menu