# Hover card: Interactive content

> Move the pointer from the link into the card and it stays open, so links and buttons inside can be clicked. The path between them is forgiving, so a diagonal move doesn’t close it.

Example: https://hextaui.com/docs/hover-card/examples/rich-content
Component docs: https://hextaui.com/docs/hover-card.md

## Add this example

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

This adds `components/examples/hover-card/rich-content.tsx` with the Hover card component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/hover-card/rich-content.tsx"
import { IconExternalLink, IconStar } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export function HoverCardRichContent() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="https://github.com/preetsuthar17"
        render={<Button variant="link" nativeButton={false} render={<a />} />}
      >
        hextaui/components
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="flex flex-col gap-2">
          <p className="font-medium">hextaui/components</p>
          <p className="text-muted-foreground">
            Copy-paste React components with motion, keyboard support and RTL
            built in.
          </p>
          <div className="flex items-center justify-between pt-1 text-xs text-muted-foreground">
            <span className="flex items-center gap-1">
              <IconStar className="size-3.5" aria-hidden="true" />
              2.4k
            </span>
            <a
              href="https://github.com/preetsuthar17"
              className="flex items-center gap-1 text-foreground underline-offset-4 hover:underline"
            >
              Open on GitHub
              <IconExternalLink className="size-3.5" aria-hidden="true" />
            </a>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

## Props in this example

### HoverCardTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<a>` | Render your own link, such as <Button variant="link" /> or a router link. |

## More Hover card examples

- [Side](https://hextaui.com/docs/hover-card/examples/sides.md)
- [Delay](https://hextaui.com/docs/hover-card/examples/delay.md)
- [Inline link](https://hextaui.com/docs/hover-card/examples/inline.md)
- [Shared card](https://hextaui.com/docs/hover-card/examples/detached.md)
- [Arrow](https://hextaui.com/docs/hover-card/examples/arrow.md)
- [Loading content](https://hextaui.com/docs/hover-card/examples/async.md)
- [Controlled](https://hextaui.com/docs/hover-card/examples/controlled.md)
- [Long content](https://hextaui.com/docs/hover-card/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/hover-card/examples/rtl.md)