# antuikit / Sources

> Sources, the list of links an answer was drawn from, as a folding list or an inline marker. Draws its arrows from the icon pack, and merges `className` through `cn()`.

Docs: https://antuikit.com/docs/components/sources

## Install

npx antuikit@latest init
npx antuikit@latest add sources

## Import

import { Sources } from "@/components/ui/sources";

## Demos

- [Basic](https://ui.antuikit.com/embed/sources/basic.md): Pass `items`, each with a `title` and a `url`, under a `title` that folds and unfolds the list.
- [Item icons](https://ui.antuikit.com/embed/sources/item-icons.md): Give an item an `icon` to show it before the link, like a file glyph for a document.
- [Arrow at the end](https://ui.antuikit.com/embed/sources/icon-end.md): Set `expandIconPosition` to `end` to move the arrow after the title, and `defaultExpanded` to `false` to start folded.
- [Inline](https://ui.antuikit.com/embed/sources/inline.md): Set `inline` to show the sources as a small marker inside text, with a card of each source and its `description` on hover.
- [Answer with sources](https://ui.antuikit.com/embed/sources/answer.md): An assistant reply in a `Bubble`, with the folded list of sources above the answer.
- [Policy lookup](https://ui.antuikit.com/embed/sources/policy-lookup.md): An HR assistant that answers a remote work question with numbered citations in the text and a folded list of the documents.
- [Comparison answer](https://ui.antuikit.com/embed/sources/comparison.md): A design system assistant that compares two icon packs in a table, with the pages it read folded above.
- [Team briefing](https://ui.antuikit.com/embed/sources/briefing.md): A Monday team briefing with three updates, each followed by a folded list of the notes and reports it was drawn from.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/sources`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Sources` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.