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

API Reference

Root

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

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. Propshttps://www.radix-ui.com/docs/primitives/components/dialog#description.

Close

The button that closes the dialog. Propshttps://www.radix-ui.com/docs/primitives/components/dialog#close.

Portal

Portals your drawer into the body.