Components
Sheet
A panel that slides in from an edge of the screen — built on Dialog, so it traps focus and dismisses on overlay click or Escape. Use it for secondary tasks like editing a record or filtering a list.
Preview
Rendered with live Cognition tokens — the panel surface, overlay scrim, and text remap on theme change, no dark: classes. Trigger it to open the panel from the right.
Sides
<SheetContent side="left">…</SheetContent>
<SheetContent side="right">…</SheetContent> {/* default */}
<SheetContent side="top">…</SheetContent>
<SheetContent side="bottom">…</SheetContent>side picks the edge the panel docks to. left / right take three-quarters of the width (max sm); top / bottom span the full width.
API
Part
Description
Sheet
Root (Dialog). Holds open / onOpenChange; uncontrolled by default.
SheetTrigger
Opens the sheet. Use asChild to render your own button.
SheetContent
The sliding panel. side picks the edge (top / right / bottom / left); portals over an overlay with a built-in close button.
SheetHeader / SheetFooter
Title/description block at the top; actions row (right-aligned from sm) at the bottom.
SheetTitle / SheetDescription
Accessible title and supporting text, wired to the dialog for screen readers.
SheetClose
Closes the sheet. Wrap a button with asChild for a footer action.
Don't and Do
Don't
Don't use a Sheet for a short confirmation — that's a Dialog — or for a bottom, touch-first panel, which is a Drawer. And don't stack sheets; keep one focused panel open at a time.
Do
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent side="right">…</SheetContent>
</Sheet>import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export function ProfileSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Edit profile</Button>
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>Make changes here.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
);
}