Sheet

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

Usage

The Sheet component provides a way to show complementary content in a sliding panel. It supports different positions, accessibility features, and customizable content.

import { Sheet } from "@raystack/apsara/v1";
 
<Sheet>
  <Sheet.Trigger asChild>
    <Button>Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content close>
    <Sheet.Title>Sheet Title</Sheet.Title>
    <Sheet.Description>Sheet description goes here</Sheet.Description>
    <span>Main content of the sheet</span>
  </Sheet.Content>
</Sheet>;

Sheet Props

Prop	Type	Default
`children`	`ReactNode`	-
`ariaLabel`	`string`	-

Sheet.Content Props

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	-
`close`	`boolean`	-
`ariaLabel`	`string`	-
`ariaDescription`	`string`	-
`children`	`ReactNode`	-

Sheet.Title Props

Inherits all HTML heading element props

Sheet.Description Props

Inherits all HTML paragraph element props

Examples

Basic

<Sheet>
  <Sheet.Trigger asChild>
    <Button>Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content close>
    <Sheet.Title>Sheet Title</Sheet.Title>
    <Sheet.Description>Sheet description goes here</Sheet.Description>
    <span>Main content of the sheet</span>
  </Sheet.Content>
</Sheet>

Positioning

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

<Flex gap="medium">
  <Sheet>
    <Sheet.Trigger asChild>
      <Button>Top Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="top" close>
      <Sheet.Title>Top Sheet</Sheet.Title>
      <Sheet.Description>Slides in from the Top</Sheet.Description>
    </Sheet.Content>
  </Sheet>
  <Sheet>
    <Sheet.Trigger asChild>
      <Button>Right Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="right" close>
      <Sheet.Title>Right Sheet</Sheet.Title>
      <Sheet.Description>Slides in from the Right</Sheet.Description>
    </Sheet.Content>
  </Sheet>
  <Sheet>
    <Sheet.Trigger asChild>
      <Button>Left Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="left" close>
      <Sheet.Title>Left Sheet</Sheet.Title>
      <Sheet.Description>Slides in from the Left</Sheet.Description>
    </Sheet.Content>
  </Sheet>
  <Sheet>
    <Sheet.Trigger asChild>
      <Button>Bottom Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="bottom" close>
      <Sheet.Title>Bottom Sheet</Sheet.Title>
      <Sheet.Description>Slides in from the Bottom</Sheet.Description>
    </Sheet.Content>
  </Sheet>
</Flex>

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

Sheet

On this page