Skip to content
rdloom

Citation

A small numbered marker, like [1], inside a reply that jumps to the source it refers to.

AIv0.1.0experimentalWCAG 2.2 AAView spec

Bring your own model.

These components only show what you give them, in one message shape, and report what the person does. They never call a model or a server, so they work with any backend. They are built for how assistive technology handles streaming text, tool steps and approvals.

Every control must work with a keyboard1and show where focus is2.

Sources

  1. Accessibility guidelines (opens in a new tab)example.com
  2. Keyboard patterns (opens in a new tab)example.com
import { Citation, Sources, type CitationPart } from "@rdloom/react";

const sources: CitationPart[] = [
  { type: "citation", id: "a", title: "Accessibility guidelines", url: "https://example.com/wcag" },
  { type: "citation", id: "b", title: "Keyboard patterns", url: "https://example.com/patterns" },
];

export default function CitationInlineExample() {
  return (
    <div className="flex w-[30rem] max-w-full flex-col gap-4">
      <p className="text-sm leading-relaxed">
        Every control must work with a keyboard
        <Citation index={1} source={sources[0]} />
        and show where focus is
        <Citation index={2} source={sources[1]} />.
      </p>
      <Sources sources={sources} />
    </div>
  );
}

Installation

npx rdloom add citation

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/citation.json

Works, but without upgrade tracking.

Usage

import { Citation, Sources, type CitationPart } from "@rdloom/react";

<div className="flex w-[30rem] max-w-full flex-col gap-4">
  <p className="text-sm leading-relaxed">
    Every control must work with a keyboard
    <Citation index={1} source={sources[0]} />
    and show where focus is
    <Citation index={2} source={sources[1]} />.
  </p>
  <Sources sources={sources} />
</div>

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
indexrequired

The number shown, starting at 1.

numbernone
sourcerequired

The source this marker points to.

CitationPartnone
href

Where the marker goes. Defaults to the matching entry in a Sources list on the same page.

stringnone

Accessibility

Role link, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

  • Enter: follows the link; with the default target, moves focus to the source entry

Screen readers announce

  • Announced as a link named "Source 2: <title>"

What your code must do

  • A real link, not a button: it goes somewhere
  • Its name says what it is ("Source 2: Title"), never just "2"
  • Focus moves to the source entry when it is on the same page, so Tab continues from there

Guidelines

Use it when

  • Marking which statement came from which source

Avoid it when

  • Footnotes that aren't sources: use plain footnotes

Don't

  • Using only a number as the link name
  • Citations with no list of sources to jump to

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-surface-subtle
  • --rd-color-surface-selected
  • --rd-color-border-strong
  • --rd-color-text-default
  • --rd-color-focus-ring