Sources
Collapsible, numbered list of the sources an AI answer drew on — "Used 3 sources" — whose numbers match InlineCitation
Category: display · WCAG 2.2-AA · ai, sources, citations, references, provenance, links
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AiSource[] | — | The sources, in citation order. Each has `title`, `url` and an optional `description`. Only absolute http(s) URLs become links; anything else (e.g. `javascript:`) renders as text. |
labels | { summary?: string } | — | Overrides for the component’s user-visible strings (i18n). `summary` may contain `{count}`. |
Design tokens
--cascivo-link-color--cascivo-color-accent-text--cascivo-color-text--cascivo-color-text-muted--cascivo-focus-ring
When to use
- Listing what an AI answer was based on, below the answer
- Giving numbered targets for the InlineCitation markers inside the answer
When not to use
- Ordinary navigation links — use List or Link
- An agent’s process (searched, read, wrote) — use ChainOfThought
How to build an accessible Sources in React →
Examples
Answer sources
<Sources
items={[
{ title: 'Refund policy', url: 'https://example.com/refunds' },
{ title: 'Terms of service', url: 'https://example.com/terms', description: '§4 covers cancellations.' },
]}
/>Related components
- InlineCitation — InlineCitation numbers in the text point at the same rows
- AiBadge — AiBadge marks the answer as AI-generated; Sources says what it rests on