AI Source Citations: React + Tailwind Component

Inline citation markers in an AI answer, with a source preview card that floats out on hover.

Superscript [1][2] citation markers embedded in an AI answer's paragraph: hovering or clicking one floats out a source preview card (favicon color swatch, title, snippet, and domain link), and the source list at the bottom highlights in both directions with the markers — a good fit for RAG Q&A, AI search, and anywhere the basis for an answer needs to be shown.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/ai-source-citations.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Show the source list at the bottomshowSourceList

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AiSourceCitations/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/ai-source-citations.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/ai-source-citations.

Usage

import { AiSourceCitations } from "@/components/ui/ai-source-citations";

<AiSourceCitations
  segments={[
    { text: "RAG has the model retrieve external knowledge before it answers", citations: [0] },
    { text: ", which effectively reduces hallucination and supplies the basis.", citations: [1] },
  ]}
  sources={[
    {
      title: "What is Retrieval-Augmented Generation?",
      domain: "aws.amazon.com",
      snippet: "Having the model consult an authoritative external knowledge base before generating a response…",
      url: "https://aws.amazon.com/what-is/retrieval-augmented-generation/",
    },
    {
      title: "A practical guide to RAG",
      domain: "ithome.com.tw",
      snippet: "Retrieving relevant document fragments from a vector database and then synthesizing an answer…",
    },
  ]}
/>

Props

Prop	Type	Default	Description
`segments`	`CitationSegment[]`	—	List of answer segments, rendered in order into a single paragraph
`segments[].text`	`string`	—	The answer text of this segment
`segments[].citations`	`number[]`	—	The sources to mark after this segment's text (0-based indices into `sources`)
`sources`	`CitationSource[]`	—	List of cited sources; the array order is the marker number (starting at 1)
`sources[].title`	`string`	—	Source title, shown in the preview card and the bottom list
`sources[].domain`	`string`	—	Source domain, used for the favicon swatch letter and the domain row
`sources[].snippet`	`string`	—	Snippet of the source content, shown in the hover preview card (up to two lines)
`sources[].url`	`string`	—	Optional link; when provided, the preview card's domain row and the list item become clickable
`showSourceList`	`boolean`	`true`	Whether the source list at the bottom is shown (highlighting in sync with the inline markers)
`className`	`string`	—	Forwarded to the outermost container, merged through `cn()`

Accessibility

Citation markers are native <button> elements, focusable with Tab; focusing one opens the preview card, and Escape closes it
Markers carry aria-expanded and a complete aria-label (including the number and the source title), and the preview card is role="tooltip"
It only closes once focus leaves both the marker and the card, so keyboard users can Tab into the source link inside the card
When "reduce motion" is enabled at the system level, the preview card only fades in and out, with no shift or scale animation
Decorative elements like the favicon swatch and the small arrow are all marked aria-hidden and do not interfere with announcement

AI Source Citations