HoverCard
Rich hover preview card with delay support.
Preview
@johndoe
Installation
bash
npx auralix-ui add hover-cardUsage
Hover Preview
tsx
import { HoverCard, HoverCardContent } from "@/components/ui/HoverCard";
<HoverCard trigger={<span>@username</span>}>
<HoverCardContent
title="John Doe"
subtitle="@johndoe"
stats={[{ label: "Followers", value: 1234 }]}
/>
</HoverCard>Props
| Name | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Element that triggers the card. |
children | ReactNode | - | Card content. |
side | "top" | "bottom" | "left" | "right" | "bottom" | Position. |
openDelay | number | 200 | Delay before opening (ms). |
On this page