sheet-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-example",
  "title": "Sheet",
  "registryDependencies": [
    "button",
    "field",
    "input",
    "sheet",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-lyra/examples/sheet-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}