{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radix-hover-card-demo",
  "type": "registry:ui",
  "title": "Radix Hover Card Demo",
  "description": "Demo showing an animated radix hover card.",
  "registryDependencies": [
    "https://animate-ui.com/r/radix-hover-card",
    "button"
  ],
  "files": [
    {
      "path": "registry/demo/radix/hover-card/index.tsx",
      "content": "import {\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardContent,\n} from '@/components/animate-ui/radix/hover-card';\n\nexport const RadixHoverCardDemo = () => {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <a\n          className=\"size-12 rounded-full overflow-hidden border\"\n          href=\"https://twitter.com/animate_ui\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n        >\n          <img\n            src=\"https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg\"\n            alt=\"Animate UI\"\n          />\n        </a>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex flex-col gap-4\">\n          <img\n            className=\"size-16 rounded-full overflow-hidden border\"\n            src=\"https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg\"\n            alt=\"Animate UI\"\n          />\n          <div className=\"flex flex-col gap-4\">\n            <div>\n              <div className=\"font-bold\">Animate UI</div>\n              <div className=\"text-sm text-muted-foreground\">@animate_ui</div>\n            </div>\n            <div className=\"text-sm text-muted-foreground\">\n              A fully animated, open-source component distribution built with\n              React, TypeScript, Tailwind CSS, and Motion.\n            </div>\n            <div className=\"flex gap-4\">\n              <div className=\"flex gap-1 text-sm items-center\">\n                <div className=\"font-bold\">0</div>{' '}\n                <div className=\"text-muted-foreground\">Following</div>\n              </div>\n              <div className=\"flex gap-1 text-sm items-center\">\n                <div className=\"font-bold\">2,900</div>{' '}\n                <div className=\"text-muted-foreground\">Followers</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/radix/hover-card.tsx"
    }
  ]
}