popover-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-example",
  "title": "Popover",
  "registryDependencies": [
    "button",
    "dialog",
    "field",
    "input",
    "popover",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/popover-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\n\nexport default function PopoverExample() {\n  return (\n    <ExampleWrapper>\n      <PopoverBasic />\n      <PopoverWithForm />\n      <PopoverAlignments />\n      <PopoverInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction PopoverBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Open Popover</Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Open Popover</Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-64\" align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n          <FieldGroup className=\"gap-4\">\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"width\" className=\"w-1/2\">\n                Width\n              </FieldLabel>\n              <Input id=\"width\" defaultValue=\"100%\" />\n            </Field>\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"height\" className=\"w-1/2\">\n                Height\n              </FieldLabel>\n              <Input id=\"height\" defaultValue=\"25px\" />\n            </Field>\n          </FieldGroup>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverAlignments() {\n  return (\n    <Example title=\"Alignments\">\n      <div className=\"flex gap-6\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              Start\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-40\">\n            Aligned to start\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              Center\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"center\" className=\"w-40\">\n            Aligned to center\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              End\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-40\">\n            Aligned to end\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Popover Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the popover.\n            </DialogDescription>\n          </DialogHeader>\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Popover\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\">\n              <PopoverHeader>\n                <PopoverTitle>Popover in Dialog</PopoverTitle>\n                <PopoverDescription>\n                  This popover appears inside a dialog. Click the button to open\n                  it.\n                </PopoverDescription>\n              </PopoverHeader>\n            </PopoverContent>\n          </Popover>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}