sheet-demo
Installation
pnpm dlx shadcn@latest add https://ui.n2020.com/r/sheet.jsonUsage
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";<Sheet>
<SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Your teammates see this name next to your comments.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Examples
Side
The side prop of SheetContent sets the edge. The default is right.
sheet-side