{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"popover-web","type":"registry:item","title":"Popover","description":"A floating overlay anchored to a trigger, suited to contextual information and lightweight interactive content.","files":[{"path":"snippets/web/popover.tsx","content":"import React from \"react\";\nimport { Avatar, Button, Popover } from \"@heroui/react\";\n\nexport function PopoverExample() {\n  const [isFollowing, setIsFollowing] = React.useState(false);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Popover>\n        <Popover.Trigger aria-label=\"Popover trigger\">\n          <div className=\"flex items-center gap-2\">\n            <Avatar size=\"sm\">\n              <Avatar.Image alt=\"Zoe\" src=\"https://img.heroui.chat/image/avatar?w=400&h=400&u=5\" />\n              <Avatar.Fallback>Z</Avatar.Fallback>\n            </Avatar>\n            <div className=\"flex flex-col gap-0\">\n              <p className=\"text-sm leading-5 font-medium\">Zoe</p>\n              <p className=\"text-xs leading-none text-muted\">zoe@heroui.com</p>\n            </div>\n          </div>\n        </Popover.Trigger>\n        <Popover.Content className=\"w-[290px]\">\n          <Popover.Dialog className=\"flex flex-col gap-3\">\n            <Popover.Heading>\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <Avatar size=\"md\">\n                    <Avatar.Image\n                      alt=\"Zoe\"\n                      src=\"https://img.heroui.chat/image/avatar?w=400&h=400&u=5\"\n                    />\n                    <Avatar.Fallback>Z</Avatar.Fallback>\n                  </Avatar>\n                  <div className=\"flex h-full flex-col items-start justify-center\">\n                    <span className=\"text-sm font-medium\">Zoey Lang</span>\n                    <span className=\"text-sm leading-4 font-normal tracking-tight text-muted\">\n                      @zoe\n                    </span>\n                  </div>\n                </div>\n                <Button\n                  className=\"rounded-full text-xs font-normal\"\n                  size=\"sm\"\n                  variant={isFollowing ? \"tertiary\" : \"primary\"}\n                  onPress={() => setIsFollowing(!isFollowing)}\n                >\n                  {isFollowing ? \"Following\" : \"Follow\"}\n                </Button>\n              </div>\n            </Popover.Heading>\n            <div>\n              <p className=\"ps-px text-sm\">\n                Design Engineer, @hero_ui lover she/her. SF Bay Area&nbsp;\n                <span aria-label=\"confetti\" role=\"img\">\n                  🎉\n                </span>\n              </p>\n            </div>\n            <div className=\"flex gap-3\">\n              <div className=\"flex gap-1\">\n                <p className=\"text-sm font-semibold\">4</p>\n                <p className=\"text-sm text-muted\">Following</p>\n              </div>\n              <div className=\"flex gap-1\">\n                <p className=\"text-sm font-semibold\">97.1K</p>\n                <p className=\"text-sm text-muted\">Followers</p>\n              </div>\n            </div>\n          </Popover.Dialog>\n        </Popover.Content>\n      </Popover>\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/popover.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}