Vaul

iOS-feel drawer component.

Live demovaul

Vaul gives you an iOS-style drawer with snap points, scaled background, and physics-y drag-to-dismiss. Built on top of Radix Dialog, so it inherits the a11y for free.

Install

npm i vaul

Snippet

import { Drawer } from "vaul";

<Drawer.Root>
  <Drawer.Trigger className="btn-primary">Open drawer</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay className="fixed inset-0 bg-black/60" />
    <Drawer.Content className="fixed bottom-0 inset-x-0 rounded-t-2xl bg-neutral-900 p-6">
      <Drawer.Title>Settings</Drawer.Title>
      ...
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>