A dedicated space to browse, filter and open every source behind an answer. The same data-driven content renders as a side panel, an inline list, or a modal — with confidence meters, verification badges, a featured detail panel and a metadata table.
Loading demo: source-explorer-real-world
npx sdaia-ui@latest add source-explorer
import { SourceExplorer } from "sdaia-ui"1<SourceExplorer2variant="side-panel"3title="Sources"4verified5subtitle="8 sources used · 6 verified"6filters={["All types", "PDF", "Web", "Internal"]}7sources={SOURCES}8detail={DETAIL}9metadata={METADATA}10/>
A docked panel beside the conversation — full source list, detail and metadata.
Loading demo: source-explorer-side-panel
A compact strip of source chips embedded in the message flow.
Loading demo: source-explorer-inline
A focused two-column overlay for deeper exploration.
Loading demo: source-explorer-modal
High-emphasis, brand-coloured surface.
Loading demo: source-explorer-brand
Bordered, transparent fill.
Loading demo: source-explorer-outline
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'side-panel' | 'inline' | 'modal' | 'side-panel' | optional |
style | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
sources | SourceExplorerItem[] | [] | optional |
title | ReactNode | 'Sources' | optional |
count | number | — | optional |
verified | boolean | false | optional |
subtitle | ReactNode | — | optional |
filters | string[] | — | optional |
detail | SourceExplorerDetail | — | optional |
metadata | SourceExplorerMetaRow[] | — | optional |
moreCount | number | — | optional |
primaryActionLabel | ReactNode | 'View all sources' | optional |
footerNote | ReactNode | — | optional |
onClose | (e) => void | — | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |