Sheet

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

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@murasakijs/ui";

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Variants

SheetContent's side prop controls which edge of the screen it slides in from.

API Reference

`SheetContent`

Prop	Type	Default
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"right"`

Other subcomponents

Component	Description
`Sheet`	The root primitive (same API as `Dialog`).
`SheetTrigger`	The element that opens the sheet. Supports `asChild`.
`SheetHeader`	Vertical stack for `SheetTitle` / `SheetDescription`.
`SheetFooter`	A row for actions, right-aligned on larger screens.
`SheetTitle`	The sheet's accessible name.
`SheetDescription`	The sheet's accessible description.
`SheetClose`	A button that closes the sheet. Supports `asChild`.

Sheet uses the same React Aria modal and dialog behavior as Dialog, styled to slide in from an edge of the viewport instead of appearing centered.