Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Hover Card
description: For sighted users to preview content available behind a link.
---

```astro live props={{ name: 'hover-card' }}
---
import { buttonVariants } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
---

<HoverCard>
  <HoverCardTrigger class={buttonVariants({ variant: "link" })}>
    @nextjs
  </HoverCardTrigger>
  <HoverCardContent class="w-80">
    <div class="flex justify-between gap-4">
      <div class="flex flex-col gap-1">
        <h4 class="text-sm font-semibold">@nextjs</h4>
        <p class="text-muted-foreground text-sm">
          The React Framework created and maintained by Vercel.
        </p>
        <div class="text-muted-foreground text-xs">Joined December 2021</div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```

## Installation

```bash
npx shadcn@latest add @fulldev/hover-card
```

## Usage

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

```astro
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Preview content</HoverCardContent>
</HoverCard>
```

## Composition

Use the following composition to build a `HoverCard`:

```text
HoverCard
├── HoverCardTrigger
└── HoverCardContent
```

## Examples

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
---

<div class="flex flex-wrap gap-3">
  <HoverCard>
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Bottom
    </HoverCardTrigger>
    <HoverCardContent side="bottom">Bottom aligned preview.</HoverCardContent>
  </HoverCard>

  <HoverCard side="right">
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Right
    </HoverCardTrigger>
    <HoverCardContent side="right">Right side preview.</HoverCardContent>
  </HoverCard>
  <HoverCard side="left">
    <HoverCardTrigger class={buttonVariants({ variant: "outline" })}>
      Left
    </HoverCardTrigger>
    <HoverCardContent side="left">Left side preview.</HoverCardContent>
  </HoverCard>
</div>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/hover-card) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/hover-card/README.md) for more information on interactivity.