JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4216029
  • Score
    100M100P100Q198986F
  • License MIT

Drawer component for React.

Package Exports

  • vaul
  • vaul/dist/index.js
  • vaul/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vaul) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

API Reference

Root [vaul-root]

Contains all parts of a dialog. Use shouldScaleBackground to enable background scaling. Can be controlled with the value and onOpenChange props. Can be opened by default via defaultOpen prop.

Trigger [vaul-trigger]

The button that opens the dialog. Props.

Content [vaul-content]

Content that should be rendered in the drawer. Props.

Overlay [vaul-overlay]

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

Styling

Each part has a specific data-attribute (starting with vaul-) that can be used for styling. You can also pass a className prop.