Drawer

A drawer is a panel that slides in from the edge of the screen. This component uses Vaul for it’s implementation.

Third Party Library

This component uses at least one third party library under the hood. Refer to the library's documentation below for more information on the API.

Vaul Documentation

Import

import { Drawer } from "@aeonkit/react";

Usage

Default

The drawer by default opens from the bottom of the screen.

Preview

Bottom DrawerTop DrawerLeft DrawerRight Drawer

Code

<div>
  <Button variant="link" onClick={() => setOpen(true)}>
    Open Drawer
  </Button>
  <Drawer open={open} onOpenChange={(open) => setOpen(open)}>
    <Drawer.Overlay />
    <Drawer.Content>
      <Drawer.Close>
        <LuX />
      </Drawer.Close>
      <Drawer.Title>Title</Drawer.Title>
      <Drawer.Description>Description</Drawer.Description>
    </Drawer.Content>
  </Drawer>
</div>

Props

Drawer

API Interface: DrawerProps

Drawer.Close

API Interface: DrawerCloseProps

Drawer.Content

API Interface: DrawerContentProps

Drawer.Description

API Interface: DrawerDescriptionProps

Drawer.Overlay

API Interface: DrawerOverlayProps

Drawer.Title

API Interface: DrawerTitleProps