Sheet

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

Usage

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

Sheet Props

Prop

Type

Sheet.Content Props

Prop

Type

Sheet.Title Props

  • Inherits all HTML heading element props

Sheet.Description Props

  • Inherits all HTML paragraph element props

Examples

Basic

1<Sheet>
2  <Sheet.Trigger asChild>
3    <Button>Open Sheet</Button>
4  </Sheet.Trigger>
5  <Sheet.Content close>
6    <Sheet.Title>Sheet Title</Sheet.Title>
7    <Sheet.Description>Sheet description goes here</Sheet.Description>
8    <span>Main content of the sheet</span>
9  </Sheet.Content>
10</Sheet>

Positioning

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

1<Flex gap="medium">
2  <Sheet>
3    <Sheet.Trigger asChild>
4      <Button>Top Sheet</Button>
5    </Sheet.Trigger>
6    <Sheet.Content side="top" close>
7      <Sheet.Title>Top Sheet</Sheet.Title>
8      <Sheet.Description>Slides in from the Top</Sheet.Description>
9    </Sheet.Content>
10  </Sheet>
11  <Sheet>
12    <Sheet.Trigger asChild>
13      <Button>Right Sheet</Button>
14    </Sheet.Trigger>
15    <Sheet.Content side="right" close>
16      <Sheet.Title>Right Sheet</Sheet.Title>
17      <Sheet.Description>Slides in from the Right</Sheet.Description>
18    </Sheet.Content>
19  </Sheet>
20  <Sheet>
21    <Sheet.Trigger asChild>
22      <Button>Left Sheet</Button>
23    </Sheet.Trigger>
24    <Sheet.Content side="left" close>
25      <Sheet.Title>Left Sheet</Sheet.Title>
26      <Sheet.Description>Slides in from the Left</Sheet.Description>

Accessibility

Sheet components are built with proper accessibility features following WAI-ARIA guidelines:

  • Uses semantic HTML elements for proper structure
  • Dismiss button includes aria-label and aria-description for screen readers
  • Interactive elements are keyboard accessible