# Hover Card

A preview of what sits behind a link: it loads as a skeleton of the same shape and can be pinned open.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/hover-card
```

## Usage

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

export function Example() {
  return (
    <HoverCard label="@larkjs" href="https://larkjs.example" tray={<span>98.4k Followers</span>}>
      <p>A React framework.</p>
    </HoverCard>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | ReactNode | required |
| children | ReactNode | required |
| href | string |  |
| tray | ReactNode |  |
| action | ReactNode |  |
| loading | boolean | false |
| side | top, bottom, left, right | top |
| media | ReactNode |  |
| pinnable | boolean | true |
| open | boolean |  |
| defaultOpen | boolean | false |
| defaultPinned | boolean | false |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- To preview a person, a link, a repo or a record without leaving the page.
- One idea and at most two actions.

## When not to use

- For anything that only lives in the card: the link must lead to the same content.
- Inside a paragraph element: use a div or span, since the card is block content.

## Accessibility

- The trigger is a real link, and the card describes it.
- A pinned card traps nothing.
- Status never relies on colour alone.

## Motion

- Opens after 500 ms from 0.96 and 4 px toward the trigger on a 0.3 spring. The nub fades in 40 ms later.
- The skeleton pulses, then cross fades to content with no layout shift.
- Pinning gives a small press and slides the pinned bar in.
- With reduced motion, it appears in place, the skeleton holds at 5% and the bar appears.