Vaul Base

Vaul Base is an unstyled drawer component for React, built with Base UI. It serves as a replacement for Dialog on mobile and tablet devices. The component utilizes Base UI's Dialog internally.

This is a port of Vaul to Base UI. It's originally created by Emil Kowalski.

Usage

To start using Vaul Base, install it in your project:

npm install vaul-base

Use the Drawer in your application:

import { Drawer } from "vaul-base"

function MyDrawerComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>Drawer content</Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}

Examples

Here are additional examples demonstrating the component in use.

Documentation

You can use original Vaul documentation for more information.