Citations
.mdInline numbered citation chips that open a source card with a spring on hover or focus, plus a sources list that highlights the cited item.
aicitationssourcesreferencespopoverrag
Installation
$npx shadcn@latest add @geturui/citations
Usage
usage.tsx
1import { Citations, CitedText, CitationSources } from "@/components/ai/citations";
2
3<Citations sources={[{ title: "Motion docs", url: "https://motion.dev", snippet: "Springs…" }]}>
4 <CitedText text="Springs settle naturally [1]." />
5 <CitationSources />
6</Citations>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sources* | CitationSource[] | — | { title, url, snippet?, domain?, meta? } — numbered from 1. |
Citation n | number | — | Inline chip for source n; use inside your own markup. |
CitedText text | string | — | Replaces [n] markers in a string with chips. |
CitationSources title | string | "Sources" | Footer heading. |
Accessibility
- Chips are links to the matching source in the footer, labelled with the source title.
- The source card opens on focus as well as hover and closes on Escape; it is linked with aria-describedby.
- External source links say they open in a new tab.