# Citation list

> Numbered sources and inline citation marks for AI answers.

Component · Free · https://lodeui.com/components/citation-list

## When to use

- Sources for AI answers or research summaries.

## When not to use

- General link lists.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/citation-list.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { CitationList, CitationMark } from "@/components/ui/citation-list";

export function Answer() {
  return (
    <>
      <p>Revenue grew 18%<CitationMark id={1} /></p>
      <CitationList sources={[{ id: 1, title: "Q3 report", url: "https://example.com/q3" }]} />
    </>
  );
}
```

## API reference

### CitationList

Numbered source cards showing each site's hostname.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sources | `{ id; title; url; snippet? }[]` | – | Sources. |

### CitationMark

An inline number linking to its source.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| id | `number` | – | Source id. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between marks and sources |

## Accessibility

- Marks are labelled "Source N"; external links say they open sources.

## Responsive behavior

- Two columns from 640px.

## Performance

- Static.

## Notes for AI

- Ids must match between marks and sources.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.