Citation

A source chip with favicon, site name and a +N count.

import { AIOverview } from "../components/ai-overview";
import { AIOverviewCitation } from "../components/ai-overview-citation";
import { AIOverviewParagraph } from "../components/ai-overview-content";
import {
  GITHUB_VERCEL,
  NEXTJS,
  VERCEL,
  YOUTUBE_VERCEL,
} from "../constants/vercel-sources";

export default function AIOverviewCitationExample() {
  return (
    <AIOverview className="p-6" collapsible={false}>
      <AIOverviewParagraph>
        One source
        <AIOverviewCitation sources={[VERCEL]} />
      </AIOverviewParagraph>
      <AIOverviewParagraph>
        Several sources
        <AIOverviewCitation sources={[GITHUB_VERCEL, VERCEL, NEXTJS]} />
      </AIOverviewParagraph>
      <AIOverviewParagraph>
        With meta
        <AIOverviewCitation sources={[YOUTUBE_VERCEL, VERCEL]} />
      </AIOverviewParagraph>
    </AIOverview>
  );
}

$ bunx --bun shadcn@latest add @notra/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:

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

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

Used in

Google AI Overview

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