# Hover Card

> Rich preview on hover or focus.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/hover-card.json`

## Install

```tsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@aspyn-io/kit";
```

### User hover card

Hover a teammate to see their role, timezone, and contact details.

```tsx
<HoverCard>
  <HoverCardTrigger asChild>
    <button className="font-medium underline-offset-4 hover:underline">Eric Gray</button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-3">
      <Avatar><AvatarFallback>EG</AvatarFallback></Avatar>
      <div className="space-y-1">
        <p className="text-sm font-semibold">Eric Gray</p>
        <p className="text-xs text-muted-foreground">eric.gray@aspyn.io · UTC−6</p>
        <div className="flex gap-1 pt-1">
          <Badge variant="secondary">Admin</Badge>
          <Badge variant="secondary">Billing</Badge>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```

### Placement

Position the card with side (top / right / bottom / left) and align (start / center / end) on HoverCardContent.

```tsx
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">Top · start</Button>
  </HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Opens above the trigger, aligned to its start edge.
  </HoverCardContent>
</HoverCard>
```

## Notes

- HoverCard is mouse/keyboard-focus only and non-interactive on touch: keep content supplemental, never the only path to information.