← All components
Interaction / component
Inline Citation
Source-aware answers with keyboard-accessible cards, caller-owned selection and three complete contexts.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Sources are caller-supplied and inert. Only absolute HTTP/HTTPS links survive validation. No source is fetched automatically; sample prose does not claim model-generated research.
- Hover previews the card; click, Enter or Space pins it. Escape, outside interaction or Close dismiss it. Source navigation never fabricates callbacks on data changes.
- Controlled open requires onOpenChange; controlled selection requires onActiveSourceChange for navigation. Unknown or removed selection displays the first valid source without changing caller state.
- Pause, Replay, background and width changes retain local and caller interaction state. Reset intentionally restores the selected complete example.
- Up to 32 unique sources, with bounded own string fields. Unsafe sources are skipped; no valid sources shows an unavailable trigger. Text size clamps to 14–18px, card width to 240–420px and viewport width.
React 19.2Modern browsers
AI Elements — Vercel, Inc. · Apache-2.0; full notice retained.
shadcn/ui · MIT; full notice retained.
Embla Carousel · MIT; full notice retained.
Radix UI · MIT; full notice retained.
Geist · SIL Open Font License 1.1; bundled font and notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sources (required) | readonly CitationSource[] | required | Caller sources: id, title, absolute HTTP(S) url, optional description/quote. Up to32 unique valid own records; id128/title200/url2048/description1000/quote2000. Invalid records are unavailable; no preview fetch. |
label | string | undefined | Accessible citation badge label; omitted derives from current sources. |
textSize | number | 14 | Finite font size clamped14–18 CSS pixels; invalid values use14. |
cardWidth | number | 320 | Preferred card width240–420 CSS pixels, constrained to available viewport. |
open | boolean | undefined | Optional authoritative popover state. Requires onOpenChange; otherwise no popover and unavailable trigger. |
onOpenChange | (open: boolean) => void | undefined | User open/close request. Omitted open permits local ownership; data changes never call this automatically. |
activeSourceId | string | undefined | Optional authoritative source id. Missing/removed id displays the first valid source without rewriting caller state. |
onActiveSourceChange | (id: string) => void | undefined | Explicit carousel selection request. Without this callback, controlled selection disables navigation. |
className | string | undefined | Additional scoped trigger styling class. |