Citation
An inline numbered source with a hover card: title, site, the supporting passage highlighted, open and copy link.
On this page
Inline pills and superscript numbers with a hover card.
Installation
Usage
import { Citation } from "@/components/ui/chatcn/citation"
<p>
loading.tsx only wraps the page below its layout
<Citation index={1} source={{ url, title, snippet, quote }} />.
</p>quote is the exact passage that supports the claim. When it appears in snippet, the card highlights it with a fill and full ink, which reads in any theme.
Props
| Prop | Type | Notes |
|---|---|---|
index | number | Matches the position in Sources |
source | CitationSource | { url, title?, snippet?, quote?, favicon? } |
variant | "inline" | "superscript" | Pill on the baseline, or a raised number |
open, defaultOpen, onOpenChange | Controlled or uncontrolled card |
Keyboard
| Key | Action |
|---|---|
Tab | Focus a citation. The card opens |
Enter | Open the source in a new tab |
Esc | Close the card |
Accessibility
- Each citation is a real link named Source 1: title. The card is a Base UI PreviewCard that opens on focus and closes with Esc (WCAG 1.4.13).
- Hit areas extend to 24 px on desktop and 40 px on touch without changing the line. On touch, the first tap opens the card instead of leaving the page.
Motion
- Pointer opens wait 200 ms, then the card scales from 0.96 at the pill over 180 ms. It closes over 140 ms.
- Opened by keyboard focus, the card appears instantly.