Source Citations
Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/source-citations.json"SourceCitation renders a compact numbered pill inline with text; on hover or
focus it springs out a preview card with the hostname, title, and snippet.
SourceList renders the full source set as a footer, optionally collapsed
behind a +N more toggle.
Usage
tsx
import {
SourceCitation,
SourceList,
} from "@/components/godui/source-citations";tsx
<p>
Answer text<SourceCitation index={1} source={source} />.
</p>
<SourceList sources={sources} previewCount={3} />Props
SourceCitation
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | — | Number rendered in the pill. |
source | CitationSource | — | Title, url, snippet, favicon. |
SourceList
| Prop | Type | Default | Description |
|---|---|---|---|
sources | CitationSource[] | — | Sources to list. |
collapsible | boolean | true | Collapse extras behind a toggle. |
previewCount | number | 3 | Shown before +N more. |