Dev Design LibraryOpen the library

React Sources Components

Dev Design Library indexes 22 React sources components from 10 open-source UI libraries, with the most coming from Notra, LocalMode, Halaska UI, Spectrum UI and AI Elements. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Sources components belong to the AI group.

Ai Message SourceReact Spectrum · React
Chat turn with sourcesReUI · ReactAn assistant reply whose SQL queries fold into one summary above the answer, with the dashboards it cited below.
SourcesAI Elements · ReactA component that allows a user to view the sources or citations used to generate a response.
CitationsbeUI · ReactConnects completed claims to supporting sources.
Citation SourcesSpectrum UI · ReactInline citation markers with hover previews or a footnote list.
SourcesPanel UI · React NativeWhere an answer came from, folded under a count.
ChatGPT ActivityNotra · ReactThe search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar.
Research Agent BlockLocalMode · ReactA tool-using ReAct research agent over its OWN on-device WebGPU-only WebLLM model (default Qwen3-1.7B-q4f16_1-MLC)…
Citations PatternHalaska UI · React
AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
Web SearchSpectrum UI · ReactAgent search results with a live reading indicator.
ChatGPT SearchNotra · ReactThe "Searched N websites" line, built on shadcn Button.
RAG Chat BlockLocalMode · ReactStreaming grounded RAG over its OWN text/PDF corpus — token-by-token answers through the engine-owned generator…
Context Sources PatternHalaska UI · React
Claude SearchNotra · ReactClaude's web search timeline with queries, result cards and status steps.
Source Citation ListLocalMode · ReactIn-message attributed-sources list extending Sources: numbered items, a similarity score with a radial confidence…
Streaming Answer PatternHalaska UI · React
Claude SourcesNotra · ReactSource pills under an assistant reply, built on shadcn Badge.
SourcesLocalMode · ReactRetrieval citations from local RAG results: a collapsible container with favicon/title/excerpt chips, a 0-1 relevance…
OpenCode SourcesNotra · ReactWeb search lines and a collapsible cited-sources list with an optional sequenced reveal.
Perplexity SearchNotra · ReactThe globe search step with queries, source rows and a +N more expander, built on shadcn Collapsible.
Perplexity Sources SummaryNotra · ReactStacked favicons and the source count next to the answer actions.

Libraries with React sources components

Related categories