# Citation

- Page: https://jiguang132.com/resources/astryx/docs/citation
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are needed.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Citation

Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are needed.

| Prop | Type | Default | Description |
|---|---|---|---|
| source * | CitationSource |  | The citation source object containing title, url, an optional image src, and an optional icon node. The url follows the shared navigation rule described on the Link `href` prop; rejected destinations leave the citation visible without navigation. Image src uses separate resource handling. |
| number * | number |  | The display index for this citation. |
| variant | 'label' \| 'number' | 'label' | Display style: a label chip showing the source title or a compact numbered badge. |

### Usage guidance

- Use the label variant when the source title adds meaningful context for the reader.
- Use the number variant for compact inline references within body text, like footnotes.
- Avoid: Mix label and number variants in the same paragraph. Pick one style per context for visual consistency.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-citation",
      "visualProps": [
        "variant"
      ]
    }
  ]
}
```

### Anatomy

- **Container**: The root wrapper. Accepted source URLs render an anchor; missing or rejected URLs render an inert span.
- **Icon**: An optional source icon shown before the label text. Accepts a favicon/logo image URL (via source.src) or a React node such as an Astryx <Icon>. Only available in the label variant.
- **Label text**: The source title, truncated with ellipsis when it exceeds the max width. Shown in the label variant.
- **Number**: The citation index displayed as a superscript badge. Shown in the number variant.


## Examples

- Citation — Showcase: All citation variants at a glance: label chips and numbered badges, with and without icons and links.
- Citation — Inline Text: Citations embedded within a paragraph of text, showing how they flow inline with surrounding content.
- Citation — Source List: A list of citation sources with icons, as you might show at the end of an AI-generated response or article footer.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt