Components

Sheet

Side drawer for context. Use for detail panels that shouldn't take the operator out of the current view.

When to usefor detail panels or forms tied to something on the current view — editing a mission, reviewing a log, running a quick action.

Import

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@ravnhq/efni/sheet"

Mission detail

<Sheet>
  <SheetTrigger render={<Button>Open</Button>} />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>MB-4472</SheetTitle>
      <SheetDescription>Detail panel…</SheetDescription>
    </SheetHeader>
    …content…
    <SheetFooter>
      <Button>Save</Button>
      <SheetClose render={<Button variant="ghost">Close</Button>} />
    </SheetFooter>
  </SheetContent>
</Sheet>

Sides

<SheetContent side="top" | "right" | "bottom" | "left" />

Do & don't

Use for detail views — the operator stays anchored to the underlying list.

Don't use a Sheet for a yes/no decision — that's Alert dialog's job.

Accessibility

Key	Action
`Esc`	Close the sheet.
`Tab / Shift+Tab`	Focus is trapped inside while open.

Focus returns to the trigger when the sheet closes.
Provide a SheetTitle even when it's visually implicit — it labels the region for AT.

Guidelines

Default to side="right" for detail panels; keep left for navigation.
Include Save and Close in SheetFooter — never rely on the backdrop click as the primary dismiss.
Keep width bounded (~440–520px) so the underlying page stays readable.

Don't

Don't stack multiple sheets — nest a Popover or inline the extra content.
Don't use Sheet for confirm-then-act — use Alert dialog.
Don't hide destructive actions on the far side of the drawer without a confirm.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the dialog is currently open.
`onOpenChange`	`((open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void)`	—	Event handler called when the dialog is opened or closed.
`SheetContent.side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`
`SheetContent.showCloseButton`	`boolean`	`true`	Render the corner close button.
`…props`	`SheetPrimitive.Trigger.Props`	—	Everything SheetTrigger passes to the element it renders.