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

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

import { Sheet } from '@raystack/apsara'

<Sheet>
  <Sheet.Trigger asChild>
    <Button variant="secondary" size="small">Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content></Sheet.Content>
</Sheet>
<Sheet>
  <Sheet.Trigger asChild>
    <Button variant="secondary" size="small">Top</Button>
  </Sheet.Trigger>
  <Sheet.Content side="top"></Sheet.Content>
</Sheet>
<Sheet>
  <Sheet.Trigger asChild>
    <Button variant="secondary" size="small">Right</Button>
  </Sheet.Trigger>
  <Sheet.Content side="right"></Sheet.Content>
</Sheet>
<Sheet>
  <Sheet.Trigger asChild>
    <Button variant="secondary" size="small">Bottom</Button>
  </Sheet.Trigger>
  <Sheet.Content side="bottom"></Sheet.Content>
</Sheet>
<Sheet>
  <Sheet.Trigger asChild>
    <Button variant="secondary" size="small">Left</Button>
  </Sheet.Trigger>
  <Sheet.Content side="left"></Sheet.Content>
</Sheet>