primitives

Sheet

Side panel sliding in from an edge. Use for detail views, edit forms, and any flow where the user benefits from keeping the underlying page in context.

Same Radix Dialog primitive as `<Dialog>`, but anchored to an edge instead of centered. Default width on desktop is `--spacing-sheet` (420px) on right/left sides; up to 720px on `sm:`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/sheet.json

Or import from the workspace package:

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@8maverik8/design";

Examples

Right sheet

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">View details</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Project Pegasus</SheetTitle>
      <SheetDescription>23 tracked resources</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Variants

side

right(default)Default — best for detail/edit panels.
leftUse when the canonical content is on the right.
topNotification / context bar.
bottomMobile sheet, action chooser.

Guidelines

Prefer Sheet over Dialog for any flow longer than ~3 fields.Modal dialogs are for interruptions; sheets keep the parent context visible.
Open multiple sheets in parallel.Overlapping side panels cause focus and z-index confusion.