Sheet

Side panel primitive sliding from any edge. Prefer the Overlay wrapper in app code.

Import

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@repo/design-system/components/ui/sheet";

Sheet is the raw side-panel primitive. In app code, prefer the Overlay wrapper (components/overlays/overlay) with variant="sheet" — it standardizes sizing, headers, and close behavior.

Basic Sheet

Sides