A container that groups several source citations under one header — summarising how many references back an answer and whether they have been verified — across Brand, Neutral, and Outline styles.
Loading demo: source-group-real-world
npx sdaia-ui@latest add source-group
import { SourceGroup } from "sdaia-ui"1<SourceGroup2variant="brand"3title="Grounding Context Logs (3 Citations)"4verification="Strict Verification"5items={[6{ name: 'Sovereignty_Act.pdf', type: 'File Segment' },7{ name: 'gdpr-text-archive', type: 'Database' },8{ name: 'lex-juris-index', type: 'API Registry' },9]}10/>
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
title | ReactNode | — | required |
items | SourceGroupItem[] | — | required |
icon | string | databaseStroke | optional |
showIcon | boolean | true | optional |
verification | ReactNode | 'Strict Verification' | optional |
showVerification | boolean | true | optional |
autoNumber | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
A raised surface with a default border — the default style.
Loading demo: source-group-brand
A subtle surface with a subtle border.
Loading demo: source-group-neutral
A transparent surface with a default border.
Loading demo: source-group-outline