Citation
citationRenders an inline numbered source link with a title and source label.
Usage
External link chip
Serial number subscript + title + source; when there is href, it will be rendered as a new tab page external link.
<Citation index={1} title="Base UI Document" href="https://base-ui.com" source="base-ui.com" />Multiple lines inline in the text
Mark the source of the information in the text of agent's answer, and align-middle follows the text baseline.
Hulian's reachability comes from Base UI1Base UI· base-ui.com, table capability comes from TanStack2TanStack Table· tanstack.com.
<p className="text-sm leading-loose">
Hulian's reachability comes from Base UI
<Citation index={1} title="Base UI" href="https://base-ui.com" source="base-ui.com" />
, table capability comes from TanStack
<Citation index={2} title="TanStack Table" href="https://tanstack.com/table" source="tanstack.com" />
.
</p>No link (local source)
When href is omitted, it is rendered as non-link span, which is used for internal knowledge base and other sources without external links.
<Citation index={3} title="Internal knowledge base notes" />No serial number
When index is omitted, the subtitle is not rendered, only the title + source.
<Citation title="Product Requirements Document v2" source="Feishu" />When to Use
Use it to mark a source inline within an agent response, combining a numeric reference marker, source title, and optional external link. It is a single inline citation that fits inside prose. MessageActions instead provides message-level controls. Citation is a stateless presentational RSC.
Import
import { Citation } from "@hulianui/ui"Props
Inherits Omit<HTMLAttributes<HTMLElement>, "title">, additionally:
| Name | Type | Default | Description |
|---|---|---|---|
| index | number | 1(showcase) | Reference number (such as 1 → [1] index) |
| href | string | — | External link URL; if provided, it will be rendered as a new tab link |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Required source title; the showcase starts with "\u745a\u740f\u8bbe\u8ba1\u7cfb\u7edf\u6587\u6863" (Hulian Design System Documentation) |
| source | ReactNode | Muted source name or domain beside the title; the showcase starts with "hulian.dev" |
Showcase initial values belong only to gallery controls. The component does not supply them as runtime defaults; title is required rather than defaulted.Usage Guidelines
titlereplaces the native HTML attribute and means the source title; it is not a tooltip string.- Without
href, the component renders a non-linked local source label. Withhref, it renders an external link usingtarget="_blank". - No additional usage constraints are currently known.
Related
StreamingText · PromptSuggestions · MessageActions · Conversation · ChatMessage · PromptInput
Playground
<Citation index={1} title="Hulian Design System Documentation" href="…" source="hulian.dev" />