vaul

Accessible, unstyled drawer component for React — a mobile-friendly bottom sheet built on Radix Dialog.

vaul

React

Accessible, unstyled drawer component for React — a mobile-friendly bottom sheet built on Radix Dialog.

npm GitHub Docs

Fit

Bundle (gzip)

18.5 kB

60.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Bottom sheet / drawer UIs on mobile require handling touch gestures, snap points, velocity-based dismissal, and correct focus management. Building this from scratch is complex and accessibility is often an afterthought.

What It Does

Vaul extends Radix UI's Dialog primitive with drawer-specific behavior: drag-to-dismiss, snap points, and smooth spring animations. It's completely unstyled, so you bring your own CSS while the library handles all the interaction logic.

Installation

bash

npm install vaul

Usage Example

tsx

import { Drawer } from 'vaul';

export function MyDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 rounded-t-2xl bg-white p-4">
          <Drawer.Title>Settings</Drawer.Title>
          <p>Your drawer content goes here.</p>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.