## Hover Card (S—114)

Hover or focus a @mention to preview the profile in a card, with an open delay, a grace period and a Follow button.

- URL: https://sundaeui.dev/components/hover-card
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/hover-card.json`
- Tags: preview, hover-card, mention, profile, popover, tooltip

A short open delay keeps cards from flickering as the pointer crosses text, and a grace period lets you move into the card to use its button.
The card positions above or below the trigger depending on space, and opens on keyboard focus as well.

### Usage

```tsx
import { HoverCard } from '@/components/sundae/hover-card'

<HoverCard />
```

### Props

- `user` (`{ name: string; handle: string; bio: string; followers: number; following: number }`, required): Profile to show.
- `openDelay / closeDelay` (`number`, default `350 / 200`): Delays in ms.
- `children` (`ReactNode`, required): The trigger text.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Mentions, author bylines, avatars in lists.

### When not to use

- Touch-first UIs: hover does not exist; link to the profile instead.

### Accessibility

- The trigger is a link; the card is linked with aria-describedby while open.
- Escape closes it; it also opens on focus so keyboard users get the same preview.
- Reduced motion removes the movement and keeps every state change.