Inline citations placed alongside an AI answer, each linking a claim back to the source it came from — across Brand, Neutral, and Outline styles.
Loading demo: citation-real-world
npx sdaia-ui@latest add citation
import { Citation } from "sdaia-ui"1<Citation2variant="brand"3index="1"4source="knowledge_base_v3"5type="Vector File"6/>
A success-green index badge on a raised surface — the default style.
Loading demo: citation-brand
A neutral index badge on a subtle surface.
Loading demo: citation-neutral
An info-blue index badge on a transparent surface.
Loading demo: citation-outline
Hide the index badge with showIndex={false}, or the type badge with showType={false}.
Loading demo: citation-toggles
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
source | ReactNode | — | required |
index | ReactNode | — | optional |
showIndex | boolean | true | optional |
type | ReactNode | — | optional |
showType | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'span' | optional |