19 lines
2.5 KiB
JSON
19 lines
2.5 KiB
JSON
{
|
|
"$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"
|
|
}
|
|
]
|
|
} |