Drawer

A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.

Anatomy

Import and assemble the component:

1import { Drawer } from "@raystack/apsara";
2

3<Drawer side="right">
4  <Drawer.Content>
5    <Drawer.Header>
6      <Drawer.Title />
7      <Drawer.Description />
8    </Drawer.Header>
9    <Drawer.Body />
10    <Drawer.Footer />
11  </Drawer.Content>
12</Drawer>

API Reference

Root

Groups all parts of the drawer. The side prop determines both the slide direction and the swipe-to-dismiss direction.

Prop

Type

Content

Renders the drawer panel that slides in from a screen edge.

Prop

Type

Header

  • children: React.ReactNode - Content to render inside the header
  • className: string - Additional CSS class name

Title

  • Inherits all Base UI Drawer.Title props

Description

  • Inherits all Base UI Drawer.Description props

Body

  • Inherits all HTML div element props

Footer

  • Inherits all HTML div element props

Examples

Basic

1<Drawer side="right">
2  <Drawer.Trigger>
3    <Button>Open Drawer</Button>
4  </Drawer.Trigger>
5  <Drawer.Content>
6    <Drawer.Header>
7      <Drawer.Title>Drawer Title</Drawer.Title>
8      <Drawer.Description>Drawer description goes here</Drawer.Description>
9    </Drawer.Header>
10    <Drawer.Body>
11      <span>Main content of the drawer</span>
12    </Drawer.Body>
13  </Drawer.Content>
14</Drawer>

Positioning

The Drawer can slide in from different sides of the screen. Swipe-to-dismiss is automatically configured based on the side prop.

1<Flex gap="medium">
2  <Drawer side="top">
3    <Drawer.Trigger>
4      <Button>Top Drawer</Button>
5    </Drawer.Trigger>
6    <Drawer.Content side="top">
7      <Drawer.Header>
8        <Drawer.Title>Top Drawer</Drawer.Title>
9        <Drawer.Description>Slides in from the Top</Drawer.Description>
10      </Drawer.Header>
11      <Drawer.Body>Content here</Drawer.Body>
12    </Drawer.Content>
13  </Drawer>
14  <Drawer side="right">
15    <Drawer.Trigger>

Accessibility

  • Uses role="dialog" with aria-modal="true"
  • Focus is trapped within the drawer and restored on close
  • Supports dismissal with Escape key and swipe gestures
  • Title is announced via aria-labelledby