Sheet
A panel that slides in from an edge of the viewport to show detail or a form alongside the page.
Install
pnpm dlx shadcn@latest add @namche/sheetUsage
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet';
<Sheet>
<SheetTrigger render={<Button variant="outline">View details</Button>} />
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Sirdar</SheetTitle>
<SheetDescription>Production deployment · eu-west</SheetDescription>
</SheetHeader>
<SheetFooter>
<SheetClose render={<Button variant="ghost">Close</Button>} />
</SheetFooter>
</SheetContent>
</Sheet>side is top | right | bottom | left and defaults to right. SheetContent
renders its own close button in the top-right corner by default — pass
showCloseButton={false} to hide it. Unlike Drawer, Sheet has no swipe
gesture or snap points; it's built on the same Dialog primitive as Dialog
itself, so overlay click and Escape both dismiss it.