Inline citation preview

Inline citation

A source chip inside the sentence that relies on it: hover or focus opens a card with the source's title, type, date, the quoted passage and a link.

  • Group
    Chat
  • Origin
    Adapted · OrganUI · source
  • License
    MIT
  • Added
    Oct 22
npx shadcn@latest add @deank/inline-citation

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { InlineCitation } from "@/registry/components/inline-citation/inline-citation";

<InlineCitation source={/* … */} />

Props

PropTypeDefaultDescription
sourceCitationSourceThe source cited.
index?numberShow a number (as in [1]) instead of the label.
defaultOpen?booleanfalseStart open (for docs and screenshots).
openDelay?number10Milliseconds before it opens on hover.
closeDelay?number100Milliseconds before it closes after the pointer leaves.
className?string

When to use

AI answers, summaries and reports where each claim should point at the document, page, message or result it came from, right where the claim is made.

When not to use

A full list of everything an answer used (put a sources list under the message); plain links to other pages (use a link); explaining a UI control (use a tooltip).

Related

Message actions · Tool call card · Comment thread