Yugen UI

Citation

Citation adds numbered sources [1] inline in an answer; hover or focus for a quick preview of title, domain and snippet, click to open the card and link.

The chip is a Popover button. Hover or keyboard focus opens a preview card without moving focus; a click or Enter pins the card and moves focus to the link; Esc closes it and returns focus. The chip describes its source through aria-describedby. No favicon is loaded from other sites; the first letter of the domain is shown instead. CitationList lists the sources under the answer, numbered to match the chips.

Use the brand color only for primary actions and selected states. Text needs a contrast ratio of at least 4.5:1.

Sources (3)

  1. 1fluent2.microsoft.designFluent 2 — Color (opens in new tab)
  2. 2w3.orgWCAG 2.2 — Contrast (Minimum) (opens in new tab)
  3. 3yugen-uiDesign.md — Color rules

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Citation, CitationList, type CitationSource } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Use the brand color only for primary actions and selected states. Text needs a contrast ratio of at least 4.5:1.

From Markdown

Pass citations to StreamingMarkdown and every [n] with a matching source becomes a chip.

Usage

Do
  • Number the chips in the order the sources appear in CitationList.
  • Provide a snippet so readers can check the source without leaving the page.
  • Place the chip right after the clause the source supports.
Don't
  • Don't use a chip for a note that has no real source.
  • Don't load favicons or preview images from other sites. Those requests expose information about the reader.
  • Don't put more than 3 chips in a row. Combine them or point to CitationList.

Props

Prop · TypeDefaultDescription
indexnumberDefault: —Displayed number (from 1).
source{ title, url?, domain?, snippet?, meta? }Default: —Source details; url only accepts http / https / mailto.
openDelay / closeDelaynumber (ms)Default: 250 / 200Delay before opening / closing on hover.
CitationList.sourcesCitationSource[]Default: —List of sources (2-column grid from sm).
CitationList.titleReactNodeDefault: "Sources"Heading, followed by the count.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.citation

Key · TypeDefault (English)messagesVi
sourcestring

Chữ ẩn trước số của chip, và tên thay khi nguồn không có tên miền.

Default (English)"Source"messagesVi"Nguồn"
sourcesstring

Tiêu đề CitationList (khi không truyền title).

Default (English)"Sources"messagesVi"Nguồn"
newTabstring

Chữ ẩn sau link mở tab mới.

Default (English)"(opens in new tab)"messagesVi"(mở tab mới)"