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 builthere.

Usage

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

npm install vaul

Use the drawer in your app.

import{Drawer}from'vaul';

functionMyComponent(){
return(
<Drawer.Root>
<Drawer.Trigger>Open</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Content>
<Drawer.Title>Title</Drawer.Title>
</Drawer.Content>
<Drawer.Overlay/>
</Drawer.Portal>
</Drawer.Root>
);
}

Documentation

Find the full API reference and examples in thedocumentation.