@neynar/ui/llm-docs/hover-card.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# HoverCard

**Type**: component

HoverCard - Preview content that appears on hover for rich contextual information A floating card component that reveals rich content when users hover over a trigger element. Designed specifically for sighted users to preview content available behind links without requiring navigation. Built on Radix UI primitives with smooth animations and intelligent positioning to avoid viewport boundaries. Perfect for user profiles, repository information, link previews, tooltips with complex content, and any contextual details that enhance the user experience without interrupting their current workflow.

## JSX Usage

```jsx
import { HoverCard } from '@neynar/ui';

<HoverCard
  defaultOpen={true}
  open={true}
  onValueChange={handleValueChange}
  openDelay={0}
  closeDelay={0}
>
  {/* Your content here */}
</HoverCard>
```

## Component Props

### defaultOpen
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onValueChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

### openDelay
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### closeDelay
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic user profile hover card
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">
### Example 2
```tsx
// With custom positioning and delays
<HoverCard openDelay={500} closeDelay={200}>
  <HoverCardTrigger asChild>
    <Button>Hover me</Button>
  </HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content appears above with custom alignment
  </HoverCardContent>
</HoverCard>
```
### Example 3
```tsx
// Interactive hover card with buttons
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="ghost">Quick Actions</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="space-y-2">
      <h4 className="font-semibold">Available Actions</h4>
      <div className="flex flex-col gap-1">
        <Button size="sm" variant="ghost">Edit Profile</Button>
        <Button size="sm" variant="ghost">View Analytics</Button>
        <Button size="sm" variant="ghost">Manage Settings</Button>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```
### Example 4
```tsx
// Link preview with rich content
<HoverCard openDelay={300}>
  <HoverCardTrigger asChild>
    <a href="/article/123" className="text-blue-600 hover:underline">
      Advanced React Patterns
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-96">
    <div className="space-y-3">
      <img src="/article-thumbnail.jpg" className="rounded w-full h-32 object-cover" />
      <div>
        <h4 className="font-semibold">Advanced React Patterns</h4>
        <p className="text-sm text-muted-foreground">
          Learn modern React patterns including render props, compound components,
          and advanced hook compositions for scalable applications.
        </p>
        <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
          <span>12 min read</span>
          <span>•</span>
          <span>Published Mar 15, 2024</span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```