Citations

When to use #

Use it for

An answer draws on documents or web pages the reader may want to check.
You need hover or focus previews of each source.

Skip it when

The content has no sources to cite.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/citations.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Citation and SourceList.

example.tsx

import { Citation, type Source } from "@/components/ui/citations"

const sources: Source[] = [
  { id: "a", title: "Stable sorting in practice", url: "https://example.com/stable-sorting", snippet: "A stable sort keeps equal items in their original order, which is what people expect when they sort a table twice." },
  { id: "b", title: "Accessible sortable tables", url: "https://example.org/a11y/sortable-tables", snippet: "Expose the current sort with aria-sort on the column header and announce changes politely." },
  { id: "c", title: "Locale-aware comparison", url: "https://example.net/intl-collator", snippet: "Intl.Collator with numeric: true sorts item 2 before item 10 without custom code." },
];

export function CitationsDemo() {
  return (
    <Citation index={1} source={sources[0]} />
  );
}

API reference #

Citation

component

PropTypeDefault

index *number—

source *Source—

SourceList

component

PropTypeDefault

sources *readonly Source[]—

labelstring"Sources"

classNamestring—

It is built on native elements and keeps aria-label and aria-hidden in step with state.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.