Sources

The links an answer was drawn from, as a folding list under the reply or a small marker inside the text.

Preview in Figma LLMs

Overview

Design

Code

Sources is installed into your project as a file you own. It takes the same props as Ant Design X's Sources, plus a ref, marked antuikit in the API table. Its folding arrow and the inline card's page arrows come from your icon pack.

Install

npx antuikit@latest init

npx antuikit@latest add sources

The first command installs AntuikitProvider and the theme tokens, the second adds this component.

Import

From @/components/ui/sources, never from @ant-design/x. The file lives in your project, so the import is a path, not a package. SourcesItem, the type of one source, comes from the same file.

import { Sources, type SourcesItem } from "@/components/ui/sources"

Two forms

By default, Sources is a list of links under a title that folds and unfolds it. Put it above or below an answer.
inline turns it into a small marker that sits in the text, with title as its label, usually a footnote number. Hovering it opens a card that pages through the sources.

<Sources

title="Used 2 sources"

items={[

{ key: "bubble", title: "Bubble", url: "https://…" },

{ key: "sender", title: "Sender", url: "https://…" },

]}

Items

Each item takes a title and a url. The link opens in a new tab.
icon sits before the title, for a favicon or a file glyph.
description is shown only in the inline card. The list form shows the title alone.
key identifies the item. Give every item one: it is what activeKey matches.

Folding

The list starts unfolded. Set defaultExpanded to false to start folded.
expanded with onExpand controls it from your state.
expandIconPosition="end" moves the arrow after the title.

Inline

activeKey picks the source the card opens on. A marker that stands for the second source of an answer passes that source's key.
popoverOverlayWidth sets the card's width. It is 300 by default.

Events

onClick fires when the reader clicks a source, with the item. The link opens as well, so use it to record the click, not to replace the navigation.
onExpand fires when the title is clicked, with the new folded state.