import { Citation } from "@/components/tool-ui/citation"; 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](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `Citation` in your UI with tool-compatible props.

```tsx import { Citation } from "@/components/tool-ui/citation"; export function Example() { return ( ); } ```

Registration tells assistant-ui which component to render when a tool returns citation data. Without it, tool results appear as raw JSON. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { Citation } from "@/components/tool-ui/citation"; import { safeParseSerializableCitation } from "@/components/tool-ui/citation/schema"; export const toolkit: Toolkit = { showCitation: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableCitation(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Title, domain, author, and publication date in one card Shows a relevant excerpt so users can judge relevance before clicking Full card for detail, inline chip for tight spaces, stacked favicons for lists Arrow keys and Enter navigate the stacked variant popover ## Props void", }, }} /> Use [`ToolUI.LocalActions`](/docs/actions) 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. ## Related - [Link Preview](/docs/link-preview): both surface external references, but LinkPreview shows Open Graph cards while Citation focuses on source attribution - [Data Table](/docs/data-table): for displaying multiple references in a structured, sortable format

Tool UI