SourceList
StableThe numbered sources behind an answer, shown in two columns.
Also known as sources, references, bibliography, citations list
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Three sources
<div className="max-w-2xl">
<SourceList sources={[
{ id: 1, title: "Q3 2026 earnings report", url: "https://example.com/q3", domain: "investor.example.com", snippet: "Total revenue increased 12% quarter over quarter." },
{ id: 2, title: "Customer metrics update", url: "https://example.com/metrics", domain: "example.com" },
{ id: 3, title: "Market overview", url: "https://example.com/market", domain: "research.example.com", snippet: "Enterprise demand remained steady through the quarter." },
]} />
</div>The short quote is optional. Cards sit in two columns on wider screens.
When to use it
Shows where an answer came from: it lists the sources behind a reply as numbered cards, so people can check a claim. The numbers match the [1] markers in the text.
Made of: Sources heading · Numbered card · Title · Website · Short quote
Use it for
- Under a finished reply that cites its sources.
- Research answers where people may want to read the original.
- Next to Markdown, whose [1] markers jump to the matching card.
Not for
- One source shown when someone hovers a marker: use CitationHoverCard.
- A single source on its own: use SourceCard.
Do and avoid
Sources: the internet, some websites, other places.
Do
- Use numbers that match the [n] markers in the reply.
- Use real page titles and websites so people can judge a source at a glance.
- Add a short quote when it shows why the source backs up the claim.
- Show it only after the reply is finished, so nothing jumps while people read.
Avoid
- Do not show a source the reply never mentions.
- Do not reuse numbers across replies on one page. Links would point to the wrong source.
- Do not use links you have not checked. Cards open whatever link you give them.
On a phone
- Sources show in one column on a phone and in two columns from 600px wide.
- Each source is a link that opens in a new tab, and its title is cut to one line and its snippet to two.
- A source card is taller than 44px, so the whole card is an easy tap target.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| sourcesrequired | Source[] | none | Sources to list. Source is { id: number; title: string; url: string; domain: string; snippet?: string }. |
| className | string | none | Extra classes merged onto the section. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--surface--border / --border-strong--surface-sunken (hover)--lime (number badge fill)--fg-muted / --fg-subtle
Built in
- It is an area named "Sources" that holds a numbered list.
- Each card is one link, read as its number, title, website and quote.
- Each card can be jumped to from a matching [1] marker in the reply.
What you need to do
- Use ids that match the [n] markers in the reply, and keep them unique on the page.
- Say that links open in a new tab if that matters to your users. Screen readers are not told.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide