Skip to content
Fabrials UI
Components / AI chat

Citations and sources

Numbered citation chips linked to a list of source cards.

@fabrials/ai-ui
Loading state

Hover a number to preview its source and highlight the matching card124.

  1. 1Cascade layers in practicedocs.example.org
  2. 2Design tokens across productsexample.com
  3. 3color-mix() referencereference.example.net
  4. 4Composing design tokens without leaking product policy into the shared layernotes.example.io
  5. 5archive.example.dev/posts/field-sizing

Installation

  1. Import the control from @fabrials/ai-ui, after setting the app up.

    TypeScript
    import { CitationProvider, CitationChip, Sources, SourceCard, SourceFavicon } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";

API reference

Prop / exportTypeDescription
sourcesCitationSource[]CitationProvider sources by number. Hovering a chip highlights its card.
numbernumberCitationChip number and href. Shows a source preview.
SourcescomponentCollapsible list of SourceCard links.
faviconUrl(url) => stringHost resolver for favicons. Without it a letter mark is shown.

Behavior

Presentational. The host supplies the sources and any favicon service; nothing is fetched by these components.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.