CitationInline

Inline source attribution with hover preview. Three variants for different density needs: superscript, bracket, and pill.

CitationInline — All Variants

Superscript (default)

The Earth is approximately 4.54 billion years old1 and orbits the Sun at an average distance of 93 million miles2.

Bracket

Attention mechanisms allow models to focus on relevant parts of the input [1]. This approach has been widely adopted [2][3].

Pill

Recent studies show significant improvements in language understanding 1 across multiple benchmarks 2.

Grouped citations

This claim is supported by multiple sources123.

Import

tsx

import { CitationInline, CitationGroup } from "@arc-lo/ui";

Variants

tsx

{/* Superscript (default) — like academic papers */}
The earth is round
<CitationInline
  index={1}
  href="https://example.com/source"
  sourceTitle="NASA Earth Facts"
  preview="Earth is the third planet from the Sun..."
/>

{/* Bracket — like Wikipedia */}
<CitationInline index={2} variant="bracket" />

{/* Pill — compact colored circle */}
<CitationInline index={3} variant="pill" />

With hover preview

tsx

<CitationInline
  index={1}
  href="https://arxiv.org/abs/2301.00001"
  sourceTitle="Attention Is All You Need"
  preview={
    <p>
      We propose a new simple network architecture, the Transformer,
      based solely on attention mechanisms...
    </p>
  }
/>

Grouping citations

tsx

This claim is well-supported
<CitationGroup>
  <CitationInline index={1} sourceTitle="Source A" />
  <CitationInline index={2} sourceTitle="Source B" />
  <CitationInline index={3} sourceTitle="Source C" />
</CitationGroup>

Props

Prop	Type	Default	Description
`index`	`number`	—	Citation index number (required)
`href`	`string`	—	Link URL
`sourceTitle`	`string`	—	Shown in preview tooltip
`preview`	`ReactNode`	—	Hover preview content
`variant`	`"superscript" \| "bracket" \| "pill"`	`"superscript"`	Display style