Sheet

A slide-out panel that appears from a screen edge, used for supplementary content that doesn't require a full page navigation.

When to use

Settings panels — user preferences, filters, configuration.
Detail views — expanded info without leaving the current page.
Navigation drawers — mobile-friendly side menus.

When NOT to use

For blocking confirmations — use AlertDialog.
For centered modal content — use Dialog.
For inline expandable content — use an accordion or collapsible.

Import

import {
  Sheet, SheetContent, SheetHeader, SheetFooter,
  SheetTitle, SheetDescription, SheetClose,
} from '@mihcm/ui/Sheet';

Basic usage

const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open</Button>
<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent>
    <SheetClose onClose={() => setOpen(false)} />
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>Adjust your preferences.</SheetDescription>
    </SheetHeader>
    <div className="flex-1 overflow-y-auto p-6">…</div>
    <SheetFooter>
      <Button onClick={() => setOpen(false)}>Done</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Side

Pass side to SheetContent: right (default), left, top, or bottom.

Sizes

Pass size to SheetContent: sm, md (default), lg, xl, or full.

Composition

SheetHeader / SheetFooter are optional layout helpers for title + action patterns.
Body content is intentionally a normal child slot. Use Skeleton, async-loaded sections, forms, tables, or custom panels inside the scrollable body area.
Nest a Form inside for inline editing flows.
The sheet traps focus and dismisses on Escape or outside click.
SheetContent uses edge-specific GPU-backed transform transitions with the same 500ms drawer easing as Drawer. The dialog enters the top layer first, then the panel transitions on the next animation frame so open/close feels smooth instead of jumping or stuttering. For mobile bottom sheets with drag gestures, use Drawer.

Dialog — centered modal overlay.
Drawer — mobile-friendly bottom sheet.
AlertDialog — non-dismissable confirmation.