shadcn.io is an independent project built on shadcn/ui
The trigger is @haydenbleasel. The card shows an avatar, Hayden Bleasel, the role, then 243 posts, 2.5k followers, and 180 following.
Save it for profiles where activity is the point. A one-line role belongs in a Tooltip instead. In Svelte, Ark UI does not count the posts. The numbers are fixed.
Installation
Anatomy
Usage
<HoverCard><HoverCardTrigger>{#snippet asChild(props)}<a {...props(/* <a> attributes; Ark types these as <button>'s */ { class: "font-medium text-sm underline underline-offset-4", href: "#" } as never)}>@haydenbleasel</a>{/snippet}</HoverCardTrigger><HoverCardContent class="w-80"><div class="flex flex-col gap-3"><div class="flex gap-4"><Avatar size="lg"><AvatarImage alt="@haydenbleasel" height={40} src="https://github.com/haydenbleasel.png" width={40} /><AvatarFallback>HB</AvatarFallback></Avatar><div class="flex flex-1 flex-col gap-1"><h4 class="font-semibold text-sm">Hayden Bleasel</h4><p class="text-muted-foreground text-sm">Product designer and developer</p></div></div><Separator /><div class="grid grid-cols-3 gap-4 text-center">{#each profileStats as stat (stat.label)}<div><div class="font-semibold text-lg">{stat.value}</div><div class="text-muted-foreground text-xs">{stat.label}</div></div>{/each}</div></div></HoverCardContent></HoverCard>FAQ
What is in the card?
A large Avatar, Hayden Bleasel and Product designer and developer, a separator, and a three-column grid: 243 Posts, 2.5k Followers and 180 Following.
How is the username link made the trigger?
HoverCardTrigger renders the username link through its asChild snippet.
How are the counts rendered?
From a list of label and value pairs at the top of the file, mapped to one column each and keyed by the label. Replace it with your own counts.
How do I change how fast the card opens and closes?
The card opens a moment after the pointer rests on the trigger and stays up long enough for the pointer to move into it. Both delays are in milliseconds.
Set openDelay and closeDelay on HoverCard; they default to 10 and 100. positioning picks another side than the bottom.
Does the card open from the keyboard and on touch screens?
Focusing the username opens the card, moving focus away or pressing Escape closes it. Touch screens have no hover, so keep what matters reachable elsewhere, or use a Popover when the card has to open on a tap.
API Reference
Hover Card
No extra props in this demo. The rest is on the Hover Card page.
Avatar
Sets size="lg", alt="@haydenbleasel", height={40}, src="https://github.com/haydenbleasel.png" and width={40}. The rest is on the Avatar page.
Separator
No extra props in this demo. The rest is on the Separator page.
