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.Header Props

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

Sheet.Title Props

  • Inherits all Base UI Dialog.Title props

Sheet.Description Props

  • Inherits all Base UI Dialog.Description props

Sheet.Body Props

  • Inherits all HTML div element props

Sheet.Footer Props

  • 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>