Drawer

The Drawer component renders its children inside an Overlay Drawer and puts a dimmer over the rest of the screen. Functionality based on the Dialog radix component, which already allows for: defaultOpen (uncontrolled), open (controlled) and onOpenChange props.

In addition to the radix component props, the Drawer also accepts a position property and positions its opening/closing pattern based on one of the 4 window sides: top, right, bottom or left.

Position

position="top" | "right" | "bottom" | "left" (default: "left")

<Drawer position="left">
  <Drawer.Trigger asChild><Button>Open the drawer</Button></Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <div className="flex items-center justify-between">
        <Text>Header</Text>
        <Drawer.Close />
      </div>
    </Drawer.Header>
    <Drawer.Main>
      <div className="h-3/2 bg-(--base-2)">
        <Text>Main</Text>
      </div>
    </Drawer.Main>
    <Drawer.Footer>
      <Text>Footer</Text>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer>

API Reference