# Citations

> Inline citation markers and a collapsible source list.

Registry name: `citations`. HTML docs: https://ui.anuragroy.dev/component/citations.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/citations.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/citations.json`.

Registry JSON: https://ui.anuragroy.dev/r/citations.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/citations.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  Citation,
  CitationIndex,
  CitationItem,
  CitationLink,
  CitationList,
  CitationTitle,
  CitationUrl
} from "@/components/ui/citations"
```

## Usage

```tsx
import {
  Citation,
  CitationIndex,
  CitationItem,
  CitationLink,
  CitationList,
  CitationTitle,
  CitationUrl,
} from "@/components/ui/citations"

export function Example() {
  return (
    <>
      <p>
        Keep the previous turn visible
        <Citation href="#src-1" index={1} />.
      </p>
      <CitationList>
        <CitationItem>
          <CitationLink href="#src-1">
            <CitationIndex>1</CitationIndex>
            <CitationTitle>Turn anchoring</CitationTitle>
            <CitationUrl>example.com</CitationUrl>
          </CitationLink>
        </CitationItem>
      </CitationList>
    </>
  )
}
```

## API

### Citation

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | string | — |  |
| `index` | number | — |  |

## See also

- [HTML page](https://ui.anuragroy.dev/component/citations): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/citations.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.