Skip to content
comp0

comp0

Navigation

Citation

Numbered inline references that link to a list of sources.

When to use it: Use it for answers, articles, and summaries that cite where a claim comes from, including text that is still being written.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Citation.tsxtsx
import { Citation, Citations, Source, Sources } from "@comp0/react";

export function Example() {
  return (
    <Citations as="div" className="flex max-w-md flex-col gap-4">
      <p className="text-base text-zinc-800 sm:text-sm dark:text-zinc-200">
        High-altitude tea grows slowly, which concentrates its flavor
        <Citation
          className="mx-0.5 align-super text-xs font-medium text-teal-700 underline-offset-2 hover:underline dark:text-teal-300"
          value="atlas"
        />
        . Lowland estates trade that depth for yield
        <Citation
          className="mx-0.5 align-super text-xs font-medium text-teal-700 underline-offset-2 hover:underline dark:text-teal-300"
          value="farms"
        />
        , and both methods are widely used
        <Citation
          className="mx-0.5 align-super text-xs font-medium text-teal-700 underline-offset-2 hover:underline dark:text-teal-300"
          value="atlas"
        />
        .
      </p>
      <Sources
        aria-label="Sources"
        className="list-decimal space-y-1 pl-5 text-base text-zinc-600 marker:text-zinc-400 sm:text-sm dark:text-zinc-400"
      >
        <Source
          className="target:text-zinc-950 dark:target:text-white"
          href="https://example.com/tea-atlas"
          title="The World Tea Atlas"
          value="atlas"
        >
          {" "}
          Atlas Press, 2023
        </Source>
        <Source
          className="target:text-zinc-950 dark:target:text-white"
          href="https://example.com/lowland-farms"
          title="Lowland Farms Survey"
          value="farms"
        >
          {" "}
          Journal of Agriculture, 2024
        </Source>
      </Sources>
    </Citations>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Citations

    Connects citations to the source list; the sources can sit anywhere. Does not add a DOM element.

  2. Citation

    Inline link to a source, shown as its number. Owns a DOM element.

  3. Sources

    Native ordered list of sources. Owns a DOM element.

  4. Source

    List item for one source, with its title linked to href. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Wrap the text and the list in Citations, then add a Source with a value and title for each source.

  2. 2

    Add the supporting parts

    Put a Citation with the matching value after each claim it supports.

  3. 3

    Make the behavior clear

    Numbers follow the order of the sources in the list; each citation is named like Source 2: Title and links to its entry.

    Exampletsx
    <Citations>
  <p>
    Tea grows at altitude <Citation value="atlas" />.
  </p>
  <Sources aria-label="Sources">
    <Source value="atlas" title="Tea atlas" href="https://example.com" />
  </Sources>
</Citations>;

Keyboard

⇥
Moves focus between citations and source links.
↵
Follows the focused citation to its source entry.

Forms and accessibility

No form behavior.

Accessibility checklist

  • A bare number is meaningless to a screen reader, so each citation is named Source 2: Title.
  • Citations are real links to the source entry, so they work without script and show where focus lands.
  • A citation to a missing source degrades to an inert Unknown source span and warns in development; it stays silent inside a busy region while the answer is still arriving.
  • Name the list with a heading or aria-label so people can find it.

API reference

Importtsx
import { Citation, Citations, Source, Sources } from "@comp0/react";

Citations

Context only

Connects citations to the source list; the sources can sit anywhere.

PropTypeDescription
asElementTypeRenders a wrapper element; without it the root renders no DOM and DOM props are a type error.

Citation

DOM element

Inline link to a source, shown as its number.

PropTypeDescription
valuestringThe value of the Source this citation points at.
childrenReactNodeReplaces the default number such as [2]; the accessible name stays Source 2: Title.
asElementTypeRenders another element in place of the default; Fragment merges the props into its single child.

Sources

DOM element

Native ordered list of sources.

PropTypeDescription
aria-labelstringNames the list when no visible heading does.

Source

DOM element

List item for one source, with its title linked to href.

PropTypeDescription
valuestringIdentity that pairs the source with its citations.
titlestringThe name of the source, shown and announced with each citation.
hrefstringWhere the source lives; the title links there when given.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

Citation

Style hookMeaning
[data-number]The 1-based position of the source in the list.
[data-missing]No Source has the value; the citation renders as an inert span.

Source

Style hookMeaning
[data-number]The 1-based position of the source in the list.

Keep exploring