Source Chip

An inline source pill with a hover card, like Gemini's citations.

import { Card } from "@/components/ui/card";

import { GeminiStoryText } from "../components/gemini-story-text";
import { GEMINI_STORY_SOURCES } from "../constants/gemini-story";

export default function GeminiSourceChipExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg font-gemini text-gemini-fg flex w-full min-w-0 flex-col gap-4 overflow-hidden rounded-2xl border px-5 py-8 text-[0.9375rem] leading-[1.65] ring-0">
      <GeminiStoryText
        sources={GEMINI_STORY_SOURCES}
        text="**Cursor Origin** is Cursor's cloud workspace, and the agent keeps working there. {{cursor-blog}} **wal-on-s3** ships its write-ahead log segments to S3, so state stays versioned and durable. {{s3-docs}}"
      />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/gemini-source-chip

GeminiSourceChip is a small rounded pill with the source name, set inline in the answer. It links to href in a new tab. Hovering it opens a shadcn HoverCard with the favicon and name, the title and a two-line description. Favicons come from Google’s favicon service unless the source sets favicon.

You rarely place chips by hand: GeminiStoryText turns {{id}} markers in the text into chips for the sources you pass.

Prop	Default	Description
`source`		`{ id, name, title, domain, href?, description?, favicon? }`.

Used in

Gemini

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.