Skip to content
rdloom

Sources

The numbered list of sources a reply drew on, with title, site and a short excerpt. Each entry is where a Citation marker lands.

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.

Sources

  1. Quarterly report, Q3 (opens in a new tab)example.comRevenue grew 12% over the previous quarter, led by annual plans.
  2. Billing system exportInternal data, March to June.
  3. Pricing page (opens in a new tab)example.org
import { Sources } from "@rdloom/react";

export default function SourcesExample() {
  return (
    <div className="w-[30rem] max-w-full">
      <Sources
        sources={[
          { type: "citation", id: "1", title: "Quarterly report, Q3", url: "https://example.com/reports/q3", snippet: "Revenue grew 12% over the previous quarter, led by annual plans." },
          { type: "citation", id: "2", title: "Billing system export", snippet: "Internal data, March to June." },
          { type: "citation", id: "3", title: "Pricing page", url: "https://www.example.org/pricing" },
        ]}
      />
    </div>
  );
}

Installation

npx rdloom add sources

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/sources.json

Works, but without upgrade tracking.

Usage

import { Sources } from "@rdloom/react";

<div className="w-[30rem] max-w-full">
  <Sources
    sources={[
      { type: "citation", id: "1", title: "Quarterly report, Q3", url: "https://example.com/reports/q3", snippet: "Revenue grew 12% over the previous quarter, led by annual plans." },
      { type: "citation", id: "2", title: "Billing system export", snippet: "Internal data, March to June." },
      { type: "citation", id: "3", title: "Pricing page", url: "https://www.example.org/pricing" },
    ]}
  />
</div>

API Reference

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

PropTypeDefault
sourcesrequired

The sources, in order. Their position is their number.

CitationPart[]none
label

Heading and accessible name of the list.

string"Sources"

Accessibility

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

Keyboard

  • Tab: moves through the source links
  • A source entry takes programmatic focus when a Citation marker is followed

Screen readers announce

  • Announced as a region named "Sources" with a list of N items
  • Each entry reads its title, and the site below it

What your code must do

  • A labelled region containing an ordered list
  • Links to other sites open in a new tab and say so in words
  • The entry a marker jumps to is highlighted and focusable

Guidelines

Use it when

  • Under any reply that cites its sources

Avoid it when

  • A list of search results the user chooses from: use a list or Table

Don't

  • Showing a source list with no markers pointing to it

Design tokens

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

  • --rd-color-text-default
  • --rd-color-text-muted
  • --rd-color-border-strong
  • --rd-color-surface-selected
  • --rd-color-focus-ring
  • --rd-color-action-primary
  • --rd-radius-control