Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
August 29, 2023 16:33
July 23, 2023 15:44
July 23, 2023 15:44
July 23, 2023 15:44
August 26, 2023 23:06
July 23, 2023 15:44
September 22, 2023 21:37
November 10, 2023 02:48
July 23, 2023 15:44
July 23, 2023 15:44
July 23, 2023 15:44
July 23, 2023 15:44

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. It uses Radix's Dialog primitive under the hood and is inspired by this tweet.


To start using the library, install it in your project:

npm install vaul

Use the drawer in your app.

import { Drawer } from 'vaul';

function MyComponent() {
  return (
        <Drawer.Overlay />


Play around with the examples on codesandbox:

API Reference


Contains all parts of a dialog. Use shouldScaleBackground to enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background. Can be controlled with the value and onOpenChange props. Can be opened by default via defaultOpen prop.

Additional props:

closeThreshold: Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.

scrollLockTimeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms

snapPoints: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take screen height into account.

fadeFromIndex: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.

modal: When falseit allows to interact with elements outside of the drawer without closing it. Defaults totrue.


The button that opens the dialog. Props.


Content that should be rendered in the drawer. Props.


A layer that covers the inert portion of the view when the dialog is open. Props.


An accessible title to be announced when the dialog is opened. Props.


An optional accessible description to be announced when the dialog is opened. Props.


The button that closes the dialog. Props.


Portals your drawer into the body.