# Citation
Source: https://ui.spencerwueste.com/docs/components/citation
Markdown: https://ui.spencerwueste.com/llm/components/citation.md

> Inline numbered citation chips with hover previews, plus source cards for answer-with-sources layouts.

> Live preview: https://ui.spencerwueste.com/docs/components/citation (demo source: `src/demos/citation-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/citation.json
```

Manual install dependencies: `radix-ui @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/citation.json

## Usage

```tsx
import { Citation, CitedText, SourceCard, SourceList, type Source } from "@/components/pandacoderz-ui/citation";
```

`CitedText` is the fast path: give it a paragraph containing `[1]`, `[2]` markers and the matching `sources` array.

```tsx
<CitedText text="Astro hydrates only islands [1]." sources={sources} activeId={active} onHover={setActive} />
<SourceList>
  {sources.map((s, i) => <SourceCard key={s.id} index={i + 1} source={s} active={active === s.id} />)}
</SourceList>
```

For full markdown, keep the `[n]` markers in the model output and render `<Citation>` yourself from a custom paragraph or text renderer.

## API Reference

### Source

| Field | Type | Description |
| --- | --- | --- |
| `id` | `string` | Stable key used for hover linking. |
| `title` / `url` | `string` | Required. |
| `snippet` | `string` | Shown in the tooltip and card. |
| `site` | `string` | Publisher name. Derived from the URL hostname when omitted. |
| `date` | `string` | Optional trailing date on the card. |

### Citation

| Prop | Type | Description |
| --- | --- | --- |
| `index` | `number` | Display number. |
| `source` | `Source` | Enables the link and hover preview. |
| `active` | `boolean` | Highlighted state. |