HoverCard
Preview content on hover without clicking, useful for showing additional context.
Basic
<HStack justify="center">
<HoverCard>
<HoverCardTrigger render={<Button variant="link" />}>
@nextjs
</HoverCardTrigger>
<HoverCardContent>
<div className="flex gap-4">
<Avatar>
<AvatarImage src="https://github.com/vercel.png" />
<AvatarFallback>VC</AvatarFallback>
</Avatar>
<div className="space-y-1">
<h4 className="text-sm font-semibold">@nextjs</h4>
<p className="text-sm text-muted-foreground">
The React Framework – created and maintained by @vercel.
</p>
<div className="flex items-center pt-2">
<CalendarDays className="mr-2 size-4 opacity-70" />
<span className="text-xs text-muted-foreground">
Joined December 2021
</span>
</div>
</div>
</div>
</HoverCardContent>
</HoverCard>
</HStack> User profile
<HStack justify="center">
<HoverCard>
<HoverCardTrigger>
<Avatar className="cursor-pointer">
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>SC</AvatarFallback>
</Avatar>
</HoverCardTrigger>
<HoverCardContent>
<div className="space-y-3">
<div className="flex gap-3">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>SC</AvatarFallback>
</Avatar>
<div>
<h4 className="text-sm font-semibold">shadcn</h4>
<p className="text-xs text-muted-foreground">@shadcn</p>
</div>
</div>
<p className="text-sm text-muted-foreground">
Building beautiful interfaces. Creator of shadcn/ui.
</p>
<div className="flex gap-4 text-xs text-muted-foreground">
<span><strong className="text-foreground">1.2k</strong> following</span>
<span><strong className="text-foreground">45.6k</strong> followers</span>
</div>
</div>
</HoverCardContent>
</HoverCard>
</HStack> Product preview
<HStack justify="center">
<HoverCard>
<HoverCardTrigger>
<span className="text-sm underline underline-offset-4 cursor-pointer">
Premium Widget
</span>
</HoverCardTrigger>
<HoverCardContent className="w-80">
<div className="space-y-3">
<div className="h-32 rounded-lg bg-muted flex items-center justify-center">
<span className="text-muted-foreground text-sm">Product image</span>
</div>
<div>
<h4 className="text-sm font-semibold">Premium Widget</h4>
<p className="text-sm text-muted-foreground mt-1">
High-quality widget with advanced features for professional use.
</p>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-semibold">$99.00</span>
<span className="text-xs text-green-600">In stock</span>
</div>
</div>
</HoverCardContent>
</HoverCard>
</HStack> Positioning
<HStack gap={8} justify="center">
<HoverCard>
<HoverCardTrigger render={<Button variant="outline" size="sm" />}>
Top
</HoverCardTrigger>
<HoverCardContent side="top">
<p className="text-sm">This card appears above the trigger.</p>
</HoverCardContent>
</HoverCard>
<HoverCard>
<HoverCardTrigger render={<Button variant="outline" size="sm" />}>
Right
</HoverCardTrigger>
<HoverCardContent side="right">
<p className="text-sm">This card appears to the right.</p>
</HoverCardContent>
</HoverCard>
<HoverCard>
<HoverCardTrigger render={<Button variant="outline" size="sm" />}>
Left
</HoverCardTrigger>
<HoverCardContent side="left">
<p className="text-sm">This card appears to the left.</p>
</HoverCardContent>
</HoverCard>
</HStack>