@monetr/vaul

Drawer component for React.

Touch-friendly bottom sheets with snap points, scaled background, nested drawers, and four-direction support. Built on Radix Dialog.

Get started View on GitHub

npm

yarn

pnpm

bun

deno

npm install @monetr/vaul

🧭

Direction-aware

Slide drawers in from top, bottom, left, or right with the same API and gestures.

📏

Snap points

Multi-stop sheets with velocity-aware swipes, sequential mode, and overlay fade control.

👆

Drag to dismiss

Real touch physics for both axes. Adjustable close threshold and release velocity.

🪟

Scaled background

iOS-style stacked card effect by tagging a wrapper with one data attribute.

🧩

Non-modal and nested

Run drawers without an overlay or nest one inside another with parent recede animation.

♿

Built on Radix Dialog

Inherits Radix focus management, accessibility, and the asChild slot pattern.

Try it

import { Drawer } from '@monetr/vaul';

export function MyDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Title>Make changes</Drawer.Title>
          <Drawer.Description>Drag down or tap outside to dismiss.</Drawer.Description>
          <Drawer.Close>Save</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}