Components
Hover Card
A hover-card component
Preview
Loading...
import { Avatar, AvatarFallback, AvatarImage } from "@/registry/axon/ui/avatar";import { Button } from "@/registry/axon/ui/button";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/registry/axon/ui/hover-card";export default function HoverCardDemo() { return ( <HoverCard> <HoverCardTrigger asChild> <Button variant="link">@confluentinc</Button> </HoverCardTrigger> <HoverCardContent className="w-80"> <div className="flex justify-between gap-4"> <Avatar> <AvatarImage src="https://github.com/confluentinc.png" /> <AvatarFallback>CFLT</AvatarFallback> </Avatar> <div className="space-y-1"> <h4 className="font-semibold text-sm">@confluentinc</h4> <p className="text-sm"> The Confluent Platform – created and maintained by @confluentinc. </p> <div className="text-muted-foreground text-xs"> Joined September 2014 </div> </div> </div> </HoverCardContent> </HoverCard> );}Installation
CLI
npx shadcn@latest add @emberui/hover-cardyarn shadcn@latest add @emberui/hover-cardpnpm dlx shadcn@latest add @emberui/hover-cardbunx --bun shadcn@latest add @emberui/hover-cardReference
This component is based on the shadcn/ui Hover Card component.