Sources Components

Dev Design Library indexes 23 sources components from 11 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. 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.
• SourcesAI Elements (Svelte) · SvelteA collapsible sources list for rendering cited links and source groups.
• 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 sources components

• Notra
• LocalMode
• Halaska UI
• Spectrum UI
• AI Elements

Related categories

• React Sources Components
• Tailwind CSS Sources Components
• shadcn/ui Sources Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Voice Input Components
• Model Selector Components
• Tool Call Components
• Streaming Text Components
• Reasoning Components
• AI Message Components
• Citation Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components