npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@thrivecart/ui';Preview card showing user details
<HoverCard>
<HoverCardTrigger asChild>
<a href="#" className="text-sm font-medium text-ink-primary underline">@johndoe</a>
</HoverCardTrigger>
<HoverCardContent className="w-64">
<div className="flex gap-3">
<Avatar size="md"><AvatarFallback>JD</AvatarFallback></Avatar>
<div className="flex flex-col gap-1">
<Text variant="body-sm" fontWeight="semibold" color="text-ink-dark">John Doe</Text>
<Text variant="body-xs" color="text-ink">Marketing Manager</Text>
<Text variant="body-xs" color="text-ink-light" className="mt-1">Joined March 2024</Text>
</div>
</div>
</HoverCardContent>
</HoverCard>Show only the most relevant summary information in the hover card.
Use a delay before showing the card to prevent accidental triggers.
Hover cards should be informational. Use Popover for interactive content.
Not all devices support hover. Ensure content is accessible via other means.