---
title: Sources
description: A collapsible list of cited sources.
category: AiReasoning
status: beta
since: 0.3.9
tags: [ai, sources, citation]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
::::TuffDemoWrapper{demo="SourcesSourcesDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const sources = [
    { id: 's1', url: 'https://vuejs.org/guide/introduction.html', title: 'Introduction', favicon: 'https://vuejs.org/logo.svg' },
    { id: 's2', url: 'https://developer.mozilla.org/en-US/docs/Web/API/Clipboard' },
  ]

  function openSource(source: { url: string }) {
    window.open(source.url, '_blank', 'noopener')
  }
  </script>

  <template>
    <TxSources :sources="sources" @open="openSource" />
  </template>
---
::::

### Stacked Sources
`variant="stack"` swaps the header globe for the leading favicons, so the cited sites show while the list is collapsed.
:::TuffDemoWrapper{demo="AiSuiteStreamingAnswerDemo" code-lang="vue" description="Appears once a streaming answer settles"}
---
code: |
  <template>
    <TxSources
      :sources="sources"
      variant="stack"
      :label-formatter="(n) => `${n} sources`"
      @open="open"
    />
  </template>
---
:::

### Best Practices

- Handle `open`; without a listener, clicking a citation does nothing.
- On desktop, open links in the external browser with `noopener` rather than navigating the app window.
- Use stable ids: failed favicons are recorded by `id`, so a changing id retries broken images.
- Override `labelFormatter` on non-English surfaces; the default is English and pluralizes in English.

## API Reference

### Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `sources` | `AiSourceItem[]` | — | The citations, `{ id, url, title?, favicon? }`. Required. |
| `labelFormatter` | `(count: number) => string` | — | Collapsed header text; defaults to `Used N source(s)`. |
| `defaultOpen` | `boolean` | `false` | Initial open state, read once on mount. |
| `variant` | `'default' \| 'stack'` | `'default'` | `stack` replaces the header globe with overlapped favicons. |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| `open` | `(source: AiSourceItem)` | Fires when a citation is clicked; navigation is prevented and left to the host. |

## Overview

- A click calls `preventDefault()` and emits `open`; the `href` stays on the `<a>`, so "open in new tab" and "copy link address" still work.
- `stack` draws at most the first three sources that have a usable favicon and falls back to the globe when none do; a favicon that fails drops out and the next source takes its place.
- The ring around stacked favicons is `--tx-sources-stack-ring`, the page background by default; repoint it when the header sits on another surface.
- An empty `title` shows the hostname without `www.`; an unparseable `url` shows verbatim.
- A favicon that fails to load is recorded and never re-requested.
- The list is an `<ol>` numbered by render order; favicons carry `alt=""` and `aria-hidden`, and the title and domain carry the accessible name.