Drawer

A drawer component for React.

@@directive("'use client'")

type drawerDatum = {goal: int}

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.

@react.component
let make = () =>
  <Drawer direction=Right>

Sides

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

let sides = [Drawer.Top, Drawer.Right, Drawer.Bottom, Drawer.Left]

@react.component

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.

@@directive("'use client'")

type browserWindow

API Reference

See the Vaul documentation for the full API reference.