AgentsAnimated
Inline Citation
Numbered citations inside a sentence, with a preview on hover.
Inline Citation puts a small numbered chip right after the claim it supports. Hover or focus previews the source (title, domain and the quoted passage); click opens it.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/inline-citation.jsonThe CLI also installs the Cuelark theme tokens and the components it builds on. With the @cuelark namespace configured, use @cuelark/inline-citation.
Builds on: hover-card, sources
Usage
import { InlineCitation } from "@/components/ui/inline-citation";
Claim<InlineCitation index={1} source={{ title, url, excerpt }} />.Motion
How it moves
The chip lights up in the signal color on hover; the preview springs from it.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
InlineCitation
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Number shown. |
| source | { title; url; excerpt? } | — | The source. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: inline citation react · ai citation component · footnote hover preview · rag citation ui · shadcn ai inline citation