Drawer

A React component that mimics the native drawer modal. This component can be used as a Drawer replacement mobile and tablet devices

💡

Drawer component will only be used on mobile and tablet devices. For desktop devices, use the Dialog or Sheet component.

Dependencies

vaul (opens in a new tab) by Emil Kowalski
ScrollArea

Anatomy

<DrawerRoot>
  <DrawerTrigger asChild>
    <Button>Open Drawer </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerTitle>Drawer for React</DrawerTitle>
    <DrawerDescription>
      A React component that mimics the native drawer modal. This component can
      be used as a Drawer replacement mobile and tablet devices
    </DrawerDescription>
    <DrawerNestedRoot>
      <DrawerTrigger asChild>
        <Button className="w-full">Open Nested Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerTitle>Nested Drawer</DrawerTitle>
        <DrawerDescription>
          A React component that mimics the native drawer modal. This component
          can be used as a Drawer replacement mobile and tablet devices
        </DrawerDescription>
      </DrawerContent>
    </DrawerNestedRoot>
    <DrawerFooter>...</DrawerFooter>
  </DrawerContent>
</DrawerRoot>

Usage

Border

Use Separator component to add a border between the contents.

Nested Drawers

Drawers can be nested infinitely. use the DrawerNestedRoot component to nest a drawer inside another drawer.

Scrollable

Pass the scrollable props to the DrawerContent component to make the content scrollable inside the drawer.

Non Dismissible

Pass dismissible props to the DrawerRoot component to make the drawer non dismissible. It can be controlled by state.

API Reference

To see the full API docs of Drawer component visit Vaul API reference (opens in a new tab).

Dialog Dropdown Menu