Best of JS • Vaul

github.mp4

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. You can read about why and how it was built here.

Usage

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.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <p>Content</p>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Examples

Play around with the examples on codesandbox:

API Reference

Root

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 the open 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.

direction: Direction of the drawer. Can be top or bottom, left, right. Defaults to bottom.

preventScrollRestoration: When true it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to true.

disablePreventScroll: When true scroll prevention mechanism will be disabled. Scroll prevention ensures that page will not scroll on mobile when opening drawer. However this mechanism gets confused when drawer has an input with autofocus and therefore opens simulataneosly with touch keyboard. Defaults to true. modal set to false also disables it.

[data-vaul-no-drag]: When interacting with an element with this data attribute, the drawer won't be dragged.

Trigger

The button that opens the dialog. Props.

Content

Content that should be rendered in the drawer. Props.

Overlay

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

Title

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

Description

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

Close

The button that closes the dialog. Props.

Portal

Portals your drawer into the body.

import { Drawer } from 'vaul'; function MyComponent() { return ( <Drawer.Root> <Drawer.Trigger>Open</Drawer.Trigger> <Drawer.Portal> <Drawer.Content> <p>Content</p> </Drawer.Content> <Drawer.Overlay /> </Drawer.Portal> </Drawer.Root> ); }