# Sources

> Citations as numbered chips or cards, linked from [n] markers in the answer.

Source: https://signoff-ui.vercel.app/docs/components/sources

## Installation

From npm:

```bash
npm i signoff-ui ai
```

```tsx
import { Sources, getSourceParts } from 'signoff-ui';
import 'signoff-ui/styles.css'; // once per app, or @import 'signoff-ui/tailwind.css' with Tailwind v4
```

Or as source, with the shadcn CLI:

```bash
npx shadcn@latest add https://signoff-ui.vercel.app/r/sources.json
```

```tsx
import { Sources } from '@/components/signoff-ui/sources';
import { getSourceParts } from '@/components/signoff-ui/lib/ai';
```

## Usage

```tsx
// Send them from the server with toUIMessageStreamResponse({ sendSources: true }).
<Sources sources={getSourceParts(message.parts)} variant="cards" />
```

## How it works

`source-url` and `source-document` parts as numbered chips or cards. In `AgentMessage`, `[n]` markers in the text become links to the matching source. It has no state, so it renders on the server too.

## API reference

### Sources

Citation list as compact chips or richer cards. External links open in a new tab.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sources` (required) | `ReadonlyArray<SourcePart \| SourceItem>` |  |  |
| `variant` | `'chips' \| 'cards'` | `'chips'` |  |
| `label` | `string \| null` |  | Visible heading. Default "Sources" (`labels.sources.label`); pass `null` to hide it (it stays as the accessible name). |
| `idPrefix` | `string` | `'source'` | Prefix for element ids (`${idPrefix}-1`, …) so inline citations can link to a source. |
| `labels` | `SignoffLabelsInput` |  | Words to use instead of the English defaults: see `SignoffLabelsProvider`. |

Other props go to the root `<div>`: `className`, `id`, `aria-*`, `data-*` and event handlers.

### SourceItem

A source in app-level shape. AI SDK `source-url` / `source-document` parts are accepted too.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` (required) | `string` |  |  |
| `url` | `string` |  |  |
| `title` | `string` |  |  |
| `description` | `string` |  | Optional snippet shown in the cards variant. |
| `filename` | `string` |  | For documents. |
| `mediaType` | `string` |  |  |

## Accessibility

- An ordered list named by `label` ("Sources"), not a landmark, so a long conversation doesn’t flood landmark navigation.
- Links open in a new tab and say so to screen readers: "(opens in a new tab)".
- Each item has the id `${idPrefix}-${n}`, which `[n]` citation links in `Markdown` and `AgentMessage` point to.
- It has no state and no `'use client'`, so it renders in Server Components too.

## Theming

Slots (`data-slot`): `signoff-sources`.

- `data-variant` on `signoff-sources`: 'chips' | 'cards'

Tokens it uses: `--signoff-accent-fg`, `--signoff-border`, `--signoff-border-strong`, `--signoff-fg`, `--signoff-fg-muted`, `--signoff-fg-subtle`, `--signoff-font-mono`, `--signoff-font-sans`, `--signoff-ring`, `--signoff-surface`, `--signoff-surface-2`. See https://signoff-ui.vercel.app/docs/getting-started#theming.