Citations

Collapsible citations for linked sources in AI responses — inline markers, favicon stacks, and an animated source list.

Inline + disclosure

Superscript Citation markers jump into a live Sources list with local favicons. Replay remounts.

Loading…

Installation

CLI

npx @sonojs/ui@latest add citations

Also needsnpx @sonojs/ui@latest add agent-disclosure && npm i lucide-react motion

Usage

citations.tsx

import {
  Citation,
  Citations,
  citationIcons,
} from "@/components/sonojs/citations"

const PREFIX = "answer"

export function Example() {
  return (
    <>
      <p>
        Peach leads summer demand
        <Citation citationId="wiki" index={1} idPrefix={PREFIX} />.
      </p>
      <Citations
        idPrefix={PREFIX}
        defaultOpen
        citations={[
          {
            id: "wiki",
            title: "Ice cream",
            domain: "wikipedia.org",
            url: "#answer-wiki",
            icon: citationIcons.wiki,
          },
        ]}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
citations	CitationItem[]	—	Source rows with id, title, optional domain/url, and local `icon`.
icon	string	—	Bundled favicon URL on each item (use `citationIcons` or your own asset).
title	ReactNode	"Sources"	Disclosure trigger label.
open / defaultOpen	boolean	false	Controlled or uncontrolled open state.
idPrefix	string	auto	Shared prefix for `Citation` anchors and list row ids.
Citation index / citationId	number / string	—	Inline superscript link into the list.
CitationStack limit	number	3	Max favicons in the overlapping stack.
className	string	—	Optional class names on the root.