API Reference

Anatomy

import { Drawer } from 'vaul';

export function MyDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger />
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Handle />
          <Drawer.Title />
          <Drawer.Description />
          <Drawer.Close />
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Components API

Description of props for each component.

Root

Contains all the parts of a drawer.

Trigger

The button that opens the drawer.

Portal

When used, portals your overlay and content parts into the body.

Overlay

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

Content

Contains content to be rendered in the open drawer.

Close

The button that closes the drawer.

Title

An optional accessible title to be announced when the drawer is opened.

Description

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

Handle

An optional handle to drag the drawer.