Components
Context Card
A card of details revealed on hover, without navigating away.
Default
<HoverCard>
<HoverCardTrigger render={<a href="/buenagames" />}>@buenagames</HoverCardTrigger>
<HoverCardContent className="w-64">
<Avatar>
<AvatarFallback>BG</AvatarFallback>
</Avatar>
<p>buenagames</p>
<p>Write. Build.</p>
</HoverCardContent>
</HoverCard>Side & alignment
<HoverCard openDelay={100} closeDelay={200}>
<HoverCardTrigger render={<a href="/buenagames" />}>@buenagames</HoverCardTrigger>
<HoverCardContent side="right" align="start" className="w-64">
…
</HoverCardContent>
</HoverCard> side (top/right/bottom/left) is the geist Alignment and shadcn
Sides/Positioning; align (start/center/end) and
sideOffset fine-tune placement. Trigger Delays are the
openDelay / closeDelay props
(ms) shown above.
Markdown for agents: /design/context-card.md · spec: /design.md