AI & Agents
Source List
Numbered sources pinned to a chat; citations like [1] in answers point here.
Usage
Sources
4 pinned- 1Tabs pattern — WAI-ARIAw3.org · web page
- 2tabs.tsxpackages/react · file
- 3Accessibility audit, SeptemberNotion · document
- 4#design-systemSlack · 12 messages
Installation
npm install @wunderui/reactThen import what you need:
import { SourceList } from "@wunderui/react"Examples
Default
Web pages, files, documents and channels.
Sources
4 pinned- 1Tabs pattern — WAI-ARIAw3.org · web page
- 2tabs.tsxpackages/react · file
- 3Accessibility audit, SeptemberNotion · document
- 4#design-systemSlack · 12 messages
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Pinned sources and citations
The answer cites [1]; the number links to the pinned source beside the chat.
Keep the copy short and reassuring, and make the saved card the default path: “Pay with Visa •••• 4242” on the button, “Change card” as a quiet link, and “Saved on Sep 12 · expires 08/28” as the helper.
Ask for the CVC only on cards saved more than 90 days ago. Card issuers in the EU still use it for SCA exemptions. [1]
Sources
4 pinned- 1Card-on-file guidancepcisecuritystandards.org · web page
- 2checkout-v3.pngFigma export · file
- 3Interview notes, Q3Notion · document
- 4#paymentsSlack · 9 messages
API Reference
| Prop | Type | Default |
|---|---|---|
| sources | { title; meta?; kind?: "web" | "file" | "doc" | "channel"; href? }[] | — |
| title | ReactNode | "Sources" |
| id | string | none — rows get id-1, id-2 … for citation links |