# Citation List
> The sources behind an AI answer: numbered rows with domain, engines that cited each page, and your own pages marked.
- **Slug:** `citation-list`
- **Kind:** component · **Category:** Agent
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/citation-list
- **All files in one bundle:** https://viewership.ai/design/components/citation-list.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/citation-list.json
## Install
1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):
```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
2. Copy this file into `src/components/viewership/citation-list/`:
- `CitationList.astro` (raw: https://viewership.ai/design/raw/citation-list/CitationList.astro.txt)
npm packages: none.
## Usage
```astro
---
import CitationList from "../components/viewership/citation-list/CitationList.astro";
---
```
## Example
The gallery demo, verbatim. Use the import path from Usage instead of `./`.
```astro
---
import CitationList from "./CitationList.astro";
---
"Best way to waterproof a canvas backpack?"
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sources` | `{ title: string; url: string; engines?: string[] }[]` | | Cited pages, in citation order. |
| `heading` | `string` | `"Sources"` | Label above the list. |
| `own` | `string` | | Your domain. Matching rows and subdomains get a "Yours" pill and an accent monogram. |
## Source
### `src/components/viewership/citation-list/CitationList.astro`
```astro
---
/**
* CitationList: the sources behind an AI answer. Numbered rows with a
* monogram, page title, domain and which engines cited it. Mark your own
* domain with `own` and those rows get an accent "Yours" pill, so a reader
* can see at a glance where the brand shows up.
*
* @example
*
*/
interface Source {
title: string;
url: string;
/** Engines that cited this page, e.g. ["ChatGPT", "Perplexity"]. */
engines?: string[];
}
interface Props {
sources: Source[];
heading?: string;
/** Your domain. Matching rows (and subdomains) are marked "Yours". */
own?: string;
class?: string;
}
const { sources, heading = "Sources", own, class: className } = Astro.props;
const host = (url: string) => {
try {
return new URL(url).hostname.replace(/^www\./, "");
} catch {
return url;
}
};
const rows = sources.map((s) => {
const domain = host(s.url);
const mine = !!own && (domain === own || domain.endsWith(`.${own}`));
return { ...s, domain, mine, letter: domain.charAt(0).toUpperCase() };
});
const ownCount = rows.filter((r) => r.mine).length;
---