# Hover card

> A preview of what a link points to: it rises off the link after a rest, stays open while you move onto it, and closes after a short grace.

Hover previews usually close the moment the pointer leaves the link, so nothing inside them can be used, or they stay stuck open. This one rises off the link after 600ms, stays open while you travel onto it (so its buttons work), and closes 300ms after you leave both. Keyboard focus opens it at once; touch never does, so a tap still follows the link.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/hover-card.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: `lucide-react`
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/hover-card
- Registry item (source): https://hairlineui.com/r/hover-card.json

## Usage

```tsx
import { HoverCard } from "@/components/ui/hover-card";

<HoverCard content={<ProfilePreview user={ada} />}>
  <a href="/people/ada">@ada</a>
</HoverCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactElement` | – | The link it previews. |
| `content` | `ReactNode` | – | The card. |
| `side / align` | `Side / Align` | `"bottom" / "start"` | Where it sits. |
| `openDelay / closeDelay` | `number` | `600 / 300` | Rest and grace in ms. |
| `width` | `number` | `300` | Card width. |

## States

- **rest**: After 600ms on the link the card rises 6px from its side out of a 4px blur (320ms).
- **travel**: Moving onto the card keeps it open.
- **leave**: 300ms after leaving both, it fades (160ms).

## What it handles

The gap between a link and its card is where most hover cards close by accident; a grace period and shared hover fix it.

- **Travel-safe**: Pointer on the link or the card keeps it open; 300ms grace after leaving both.
- **Rests before opening**: 600ms, so passing over links doesn't flash cards.
- **Keyboard**: Focus opens it, Escape closes it.
- **Touch-honest**: No hover on touch: the link just works.

## Replaces

Radix HoverCard, link preview, profile popover

## Where it fits

- **Mentions and usernames**: A profile with a Follow button on @ada.
- **Issue and PR references**: Status and title behind #482.
- **Docs links**: A summary of the page before you leave.
- **Tables**: A customer's details behind their name.

## Notes

- Placement, presence and dismissal come from floating.ts, shared with tooltip, popover and the menus.
- Nothing in the card should be the only way to reach something: touch and screen readers may never see it.
- Reduced motion: it fades.

License: MIT (https://hairlineui.com/license#components)