Tool UI

Citation

Display source references with attribution.
<CitationList  id="citation-list"  citations={citations}  variant="stacked"/>

Users trust answers they can verify. Citation renders a clickable reference card with title, domain, favicon, and an optional text snippet so the reader can trace any claim back to its source. Three variants cover different density needs: a full card for prominent references, an inline chip for tight spaces, and stacked favicons for citation lists.

Role: Information. For displaying data without user input. See Design Guidelines for how component roles work.

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/citation

Render Citation in your UI with tool-compatible props.

import { Citation } from "@/components/tool-ui/citation";export function Example() {  return (    <Citation      id="citation-example"      href="https://react.dev/reference/react/useState"      title="useState – React"      snippet="useState is a React Hook that lets you add a state variable to your component."      domain="react.dev"      favicon="https://www.google.com/s2/favicons?domain=react.dev&sz=32"      type="document"    />  );}

Registration tells assistant-ui which component to render when a tool returns citation data. Without it, tool results appear as raw JSON.

import { type Toolkit } from "@assistant-ui/react";import { Citation } from "@/components/tool-ui/citation";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  showCitation: {    type: "backend",    render: createResultToolRenderer({      render: (parsedResult) => <Citation {...parsedResult} />,    }),  },};

Key Features

Source attribution

Title, domain, author, and publication date in one card

Snippet preview

Shows a relevant excerpt so users can judge relevance before clicking

Three variants

Full card for detail, inline chip for tight spaces, stacked favicons for lists

Keyboard accessible

Arrow keys and Enter navigate the stacked variant popover

Props

Prop

Type

Use ToolUI.LocalActions to compose external actions next to citations.

Accessibility

The stacked variant popover supports full keyboard navigation:

  • Enter / Space: Open the popover
  • Tab: Navigate between citations
  • Escape: Close popover and return focus to trigger

Mouse users can hover to reveal the popover. All variants open links in new tabs with noopener,noreferrer for security.

  • Link Preview: both surface external references, but LinkPreview shows Open Graph cards while Citation focuses on source attribution
  • Data Table: for displaying multiple references in a structured, sortable format
ChartCode Block