Tabs should always expose an aria-label or labelled control surface so screen readers can announce the active panel [1]WCAG 2.2 — Focus Appearancep.1. Radix wires roving-tabindex arrow-key navigation across the trigger row automatically [2]Radix UI — Tabs primitive, which matches the ARIA Authoring Practices guidance for the canonical tab pattern [3]ARIA Authoring Practices — Tab patternp.2.
Citation
Source attribution chip — renders a citation for a RAG hit, search result, or any external reference. Becomes a focusable link when url is provided.
Installation
pnpm
pnpm dlx @hex-core/cli add citationAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Source title or filename (e.g. "auth-overview.md"). |
url | string | — | If provided, the chip becomes an anchor opening in a new tab. |
page | number | — | Optional page number (renders "p.3"). |
index | number | — | Optional inline footnote number (renders "[1]"). |
children | ReactNode | — | Trailing slot — extra metadata (e.g. relevance score). |
className | string | — | Additional CSS classes. |
AI Guidance
When to use
Surface RAG/search-result sources after an assistant message. Use `index` for footnote-style numbering tied to inline `[1]` markers in the answer.
When not to use
Don't use for general external links in chat (use Markdown). Don't fabricate sources — only render Citation for retrievals the model actually used.
Common mistakes
- Showing the URL twice (in `title` AND `url`) — pick a human title separately
- Skipping `target="_blank"` — handled automatically when url is set; don't override
Accessibility
With `url`, renders a real anchor (`rel="noreferrer noopener"`). Without `url`, renders a static span. Add `aria-label` on the wrapper if title alone lacks context.
Token budget: 240
Verified against @hex-core/components@1.12.0