{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:component",
  "title": "Hover Card",
  "author": "Toby Belhome",
  "description": "For sighted users to preview content available behind a link.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "hover-card"
  ],
  "files": [
    {
      "path": "examples/components/hover-card/01/page.tsx",
      "content": "import { CalendarIcon } from \"lucide-react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">The React Framework – created and maintained by @vercel.</p>\n            <div className=\"text-muted-foreground text-xs\">Joined December 2021</div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hover-card.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}