Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Anatomy

Import and assemble the component:

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

3<Sheet>
4  <Sheet.Content>
5    <Sheet.Header>
6      <Sheet.Title />
7      <Sheet.Description />
8    </Sheet.Header>
9    <Sheet.Body />
10    <Sheet.Footer />
11  </Sheet.Content>
12</Sheet>

API Reference

Root

Prop

Type

Content

Prop

Type

Header

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

Title

  • Inherits all Base UI Dialog.Title props

Description

  • Inherits all Base UI Dialog.Description props

Body

  • Inherits all HTML div element props

Footer

  • Inherits all HTML div element props

Examples

Basic

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

Positioning

The Sheet can slide in from different sides of the screen.

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

Accessibility

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