Drawer

A drawer component for React.

About

Drawer is built on top of Vaul by emilkowalski.

Installation


npx shadcn@latest add @rescript-shadcn/Drawer

Usage

<Drawer>
  <Drawer.Trigger asChild=true>
    <Button variant=Outline> {"Open Drawer"->React.string} </Button>
  </Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title> {"Are you absolutely sure?"->React.string} </Drawer.Title>
      <Drawer.Description> {"This action cannot be undone."->React.string} </Drawer.Description>
    </Drawer.Header>
    <Drawer.Footer>
      <Button> {"Submit"->React.string} </Button>
      <Drawer.Close asChild=true>
        <Button variant=Outline> {"Cancel"->React.string} </Button>
      </Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer>

Examples

Scrollable Content

Keep actions visible while the content scrolls.

Sides

Use the direction prop to set the side of the drawer. Available options are top, right, bottom, and left.

Responsive Dialog

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

API Reference

See the Vaul documentation for the full API reference.