<!-- source-hash: 978b7c235daf9982dad2eac7af423eb6 -->
A React hover card component built on Radix UI primitives that displays rich content when users hover over trigger elements.

## Key Components

- **`HoverCard`** - Root component that manages hover state and positioning
- **`HoverCardTrigger`** - Element that triggers the hover card when hovered
- **`HoverCardContent`** - Styled content container with animations and positioning

## Usage Example

```typescript
import { HoverCard, HoverCardTrigger, HoverCardContent } from "./hover-card"

function UserProfile() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <button className="underline">@username</button>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex flex-col space-y-2">
          <h4 className="text-sm font-semibold">John Doe</h4>
          <p className="text-sm text-muted-foreground">
            Software developer with 5 years experience
          </p>
          <div className="flex items-center pt-2">
            <span className="text-xs text-muted-foreground">
              Joined January 2020
            </span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

The content includes smooth fade and zoom animations, configurable positioning (center-aligned by default with 4px offset), and responsive styling with popover theming. Perfect for user profiles, tooltips, or any contextual information that enhances UX without cluttering the interface.