Sheet

Sheets are for work that should stay connected to the current page. They give a task its own surface without fully interrupting the canvas the way a centered dialog does. In this system the sheet is spare, edge-attached, and useful for metadata edits, review queues, and side-panel tooling.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger asChild>
    <Button>Open review rail</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Issue review</SheetTitle>
      <SheetDescription>Resolve notes without leaving the article canvas.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Why This Primitive Exists

Some work belongs beside the page, not above it. A sheet keeps the surrounding context visible while giving the user enough room for a focused secondary task.

• Use it for metadata, approvals, filters, or supporting navigation that should remain tied to the current route.
• Prefer it when the user may need to glance back at the underlying page while completing the task.
• Avoid it for hard-stop confirmations or short decisions that are better handled by Dialog.

Examples

Basic Review Rail

The default pattern is one trigger, a short header, a bounded content area, and a compact footer action row.

<SheetContent>
  <SheetHeader>
    <SheetTitle>Issue review</SheetTitle>
    <SheetDescription>Resolve remaining notes before publish.</SheetDescription>
  </SheetHeader>
  <SheetFooter>{/* actions */}</SheetFooter>
</SheetContent>

Edge Placement

The side prop lets the same primitive attach to the viewport edge that best matches the workflow. Right and left are the common cases. Top and bottom are useful for shorter notice-style surfaces.

<SheetContent side="left">{/* navigation or structure */}</SheetContent>
<SheetContent side="bottom">{/* mobile-adjacent actions */}</SheetContent>

In Context

Sheets are most convincing when the trigger sits next to the work it affects. That keeps the temporary panel feeling local instead of detached.

<CardContent>
  <Sheet>
    <SheetTrigger asChild>
      <Button>Open metadata rail</Button>
    </SheetTrigger>
  </Sheet>
</CardContent>

Guidance

Choose Sheet Over Dialog When Context Still Matters

• Use a sheet when the current page remains part of the decision.
• Use a dialog when the user should pause and make one bounded choice.
• Use a drawer when the interaction should rise from the bottom edge on mobile.

Keep The Scope Narrow

• Sheets work best for one side task at a time.
• Keep titles direct and descriptions short.
• If the panel starts needing deep navigation or several independent sections, move that work into a route or persistent sidebar.

Match The Edge To The Job

• Use right for inspector-style panels, metadata, and publishing details.
• Use left for supporting navigation or document structure.
• Use top or bottom for shorter notices, queues, or mobile-adjacent actions.

API Reference

Core Exports

SheetContent Props

SheetContent also accepts the standard Radix dialog content props. Sheet itself supports the usual open, defaultOpen, and onOpenChange root props for controlled and uncontrolled use.

The component is built on Radix Dialog, so focus trapping, escape handling, and accessibility semantics come from the underlying primitive.