https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516

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:,

1npm install vaul

Use the drawer in your app.

1import { Drawer } from 'vaul';
2
3function MyComponent() {
4  return (
5    <Drawer.Root>
6      <Drawer.Trigger>Open</Drawer.Trigger>
7      <Drawer.Portal>
8        <Drawer.Content>
9          <Drawer.Title>Title</Drawer.Title>
10        </Drawer.Content>
11        <Drawer.Overlay />
12      </Drawer.Portal>
13    </Drawer.Root>
14  );
15}

Documentation

Find the full API reference and examples in the documentation.