Components
Sheet
Edge panel on the raised surface. Same Radix dialog primitive as Dialog.
A side panel ported from Atlas. Same @radix-ui/react-dialog primitive as Dialog —
Dialog is centered, Sheet docks to an edge (right by default; also left, top,
bottom). Overlay is bg-contrast/50. Content sits on bg-surface-raised. Slide
uses token translate animations so it does not fight layout. Reduced motion drops
it. The close control is 44px on coarse pointers.
Usage
import { Button } from '@/components/ui/button';
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet';
<Sheet>
<SheetTrigger asChild>
<Button>Open</Button>
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Supporting copy.</SheetDescription>
</SheetHeader>
<SheetFooter>
<SheetClose asChild>
<Button variant="outline">Cancel</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>Install
shadcn add @gesso/sheet