Skip to content
Get All-Access
AI & AgentsPro

Source List

Numbered sources pinned to a chat; citations like [1] in answers point here.

Usage

Sources

4 pinned
  1. 1Tabs pattern — WAI-ARIAw3.org · web page
  2. 2tabs.tsxpackages/react · file
  3. 3Accessibility audit, SeptemberNotion · document
  4. 4#design-systemSlack · 12 messages

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import { SourceList } from "@wunderui/react"

Examples

Default

Web pages, files, documents and channels.

Sources

4 pinned
  1. 1Tabs pattern — WAI-ARIAw3.org · web page
  2. 2tabs.tsxpackages/react · file
  3. 3Accessibility audit, SeptemberNotion · document
  4. 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
  1. 1Card-on-file guidancepcisecuritystandards.org · web page
  2. 2checkout-v3.pngFigma export · file
  3. 3Interview notes, Q3Notion · document
  4. 4#paymentsSlack · 9 messages

API Reference

PropTypeDefault
sources{ title; meta?; kind?: "web" | "file" | "doc" | "channel"; href? }[]—
titleReactNode"Sources"
idstringnone — rows get id-1, id-2 … for citation links
PreviousSlash Command MenuNextTerminal Output