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 render={<Button />}>Open Drawer</Drawer.Trigger>
3  <Drawer.Content>
4    <Drawer.Header>
5      <Drawer.Title>Drawer Title</Drawer.Title>
6      <Drawer.Description>Drawer description goes here</Drawer.Description>
7    </Drawer.Header>
8    <Drawer.Body>
9      <span>Main content of the drawer</span>
10    </Drawer.Body>
11  </Drawer.Content>
12</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 render={<Button />}>Top Drawer</Drawer.Trigger>
4    <Drawer.Content side="top">
5      <Drawer.Header>
6        <Drawer.Title>Top Drawer</Drawer.Title>
7        <Drawer.Description>Slides in from the Top</Drawer.Description>
8      </Drawer.Header>
9      <Drawer.Body>Content here</Drawer.Body>
10    </Drawer.Content>
11  </Drawer>
12  <Drawer side="right">
13    <Drawer.Trigger render={<Button />}>Right Drawer</Drawer.Trigger>
14    <Drawer.Content side="right">
15      <Drawer.Header>

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