Citation

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add citation

Usage#

import { Citation } from "@/components/ui/citation"

const source = {
  href: "https://web.dev/articles/lcp",
  title: "Largest Contentful Paint (LCP)",
  description: "Sites should strive to have LCP of 2.5 seconds or less.",
}

export function Answer() {
  return (
    <p>
      A good LCP is 2.5 seconds or less
      <Citation index={1} sources={[source]} />.
    </p>
  )
}

Anatomy#

Most of the time <Citation sources={…} /> is all you write: it renders the chip and the card from the data. Compose the parts when the chip needs its own label or the card its own content.

import {
  Citation,
  CitationTrigger,
  CitationContent,
  CitationSource,
} from "@/components/ui/citation"

<Citation sources={sources}>
  <CitationTrigger />
  <CitationContent>
    <CitationSource />
  </CitationContent>
</Citation>

The card#

Each source is a row: the favicon and domain as a quiet eyebrow, the page title, then the passage the claim rests on, clamped to three lines. Several sources stack as several rows in one card, each a link of its own, with its hover fill set 8px into the card on the Popover's inset rung so the corners stay concentric.

Source chips#

variant="source" trades the counter for the favicon and the domain, with +N when more than one source backs the claim: the answer-engine register, where saying where without a hover is worth the width in the line. The counter stays the default because it reads quietest in dense prose.

In a chat#

Drop the chips straight into a Chat turn. The chip carries a data-slot, so the turn's prose styles leave it alone: markdown links get the underline, the chip keeps its own look.

API reference#

FAQ#