Aspyn

Sheet

Slide-in side panel for edit and detail flows.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetBody,
  SheetFooter,
} from "@aspyn-io/kit";

Edit panel (right side)

The side-panel pattern for editing without losing page context. SheetBody scrolls between the pinned header and footer.

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Edit customer</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit customer</SheetTitle>
      <SheetDescription>Changes save when you submit.</SheetDescription>
    </SheetHeader>
    <SheetBody>…form fields…</SheetBody>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Sides

<SheetContent side="left">…</SheetContent>
<SheetContent side="top">…</SheetContent>
<SheetContent side="bottom">…</SheetContent>

Notes

  • Built on the Dialog primitive — focus trapping, Escape, and overlay dismissal included.
  • Use Sheet for edit/detail side panels; use Dialog for focused decisions.