shadcn/ui Sources Components

Dev Design Library indexes 8 shadcn/ui sources components from 2 open-source UI libraries, with the most coming from Notra and AI Elements (Svelte). Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Sources components belong to the AI group.

• 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.
• ChatGPT SearchNotra · ReactThe "Searched N websites" line, built on shadcn Button.
• Claude SearchNotra · ReactClaude's web search timeline with queries, result cards and status steps.
• Claude SourcesNotra · ReactSource pills under an assistant reply, built on shadcn Badge.
• 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 shadcn/ui sources components

• Notra
• AI Elements (Svelte)

Related categories

• Sources Components
• React Sources Components
• Tailwind CSS Sources Components
• shadcn/ui AI Element Components
• shadcn/ui Prompt Input Components
• shadcn/ui AI Message Components
• shadcn/ui Citation Components
• shadcn/ui Conversation Components
• shadcn/ui Model Selector Components
• shadcn/ui Tool Call Components