vaul

https://github.com/emilkowalski/vaul/assets/36730035/560771cf-c516-4e96-9000-1f5fce29f379

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. It is hugely inspired by Radix's Dialog component and Devon's work.

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.Input placeholder="drawer" />
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

API Reference

Root [vaul-root]

Contains all parts of a dialog. Use shouldScaleBackground to enable background scaling. Can be controlled with the value and onOpenChange props. Can be opened by default via defaultOpen prop.

Trigger [vaul-trigger]

The button that opens the dialog. Props.

Content [vaul-content]

Content that should be rendered in the drawer. Props.

Overlay [vaul-overlay]

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

Portal

Portals your drawer into the body.

Input

Input inside a drawer. It has default input props.

Textarea

Textarea inside a drawer. It has default textarea props.

Styling

Each part has a specific data-attribute (starting with vaul-) that can be used for styling. You can also pass a className prop.