sheet-side.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-side",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "sheet"
  ],
  "files": [
    {
      "path": "examples/sheet-side.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}