---
title: Citation
description: A source chip with favicon, site name and a +N count.
---

<Component path="google-ai-overview/examples/ai-overview-citation" />

<RegistryInstall name="ai-overview-citation" />

The chip is a shadcn `HoverCardTrigger` styled with `badgeVariants`. It shows the first source and links to it, with `+N` for the rest. Hovering opens a shadcn `HoverCard` listing every source.

| Prop | Default | Description |
| --- | --- | --- |
| `sources` | | One or more sources. The chip shows the first. |
| `preview` | `true` | Opens the sources popup on hover. Set `false` for a plain link chip. |
| `renderSourceAction` | | Renders a button in each popup card's corner, like Google's "About this result". `AIOverviewSourceAction` gives you Google's three-dot button. |

Each source can carry an optional `title`, `description` and `thumbnail` for the popup. Favicons use shadcn `Avatar`, so a broken image falls back to the site's first letter.

Wire the action to anything, like a menu, a dialog or a toast:

```tsx
<AIOverviewCitation
  renderSourceAction={(source) => (
    <AIOverviewSourceAction
      onClick={() => toast("3 dot button clicked", { description: source.title })}
    />
  )}
  sources={sources}
/>
```

```ts
interface AIOverviewSource {
  favicon: string;
  href: string;
  meta?: string;
  description?: string;
  siteName: string;
  thumbnail?: string;
  title?: string;
}
```

## Used in

**[Google AI Overview](/blocks/google-ai-overview)**

A full recreation of Google's AI Overview with highlights, citation chips and a collapsible Show more.