Dev Design Libraryshadcn/ui AI Element Components
Dev Design Library indexes 95 shadcn/ui ai element components from 13 open-source UI libraries, with the most coming from Notra, AI Elements (Svelte), Shadcn Space, Cojeev UI and D2Studio UI. 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.
AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
Ask Docs FooterSpectrum UI · ReactA docs question box that streams a cited answer, over link columns.
Input MessageFluid Functionalism · ReactChat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible…
Dialog 13 - Upgrade PlanShadcn Space · ReactUpgrade plan dialog with a yearly billing switch, selectable plan cards, an included features list, and a success state.
Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
AI InputNexvyn UI · ReactAI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.
Ai Input 001Watermelon UI · React
Component Previewglasscn · ReactA preview shell for component demos with switchable default and glass variants.
AttachmentHextaUI · ReactFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their…
Agent stateCojeev UI · ReactA sculpted, living status field that changes contour and color as an agent thinks, works, asks for input, or finishes.
Chat Input With Voice And Send Buttonsv-particles · Svelte
AI Content Creator CardD2Studio UI · ReactPro version content creation card
AI Input SelectorKokonut UI · ReactAI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and…
Input ModelSpectrum UI · Reactcomponent for the Input Model Demo
Queued message stackFluid Functionalism · ReactSonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a…
Field 03 - Choose a PlanShadcn Space · ReactA plan selection layout built with the Field primitive, wrapping a radio group in field labels to create selectable…
CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
AI Overview CitationNotra · ReactA source chip built on shadcn Badge and HoverCard.
Ai Input 002Watermelon UI · React
AttachmentCojeev UI · ReactPresents a file name, type, metadata, and nearby actions as a compact attachment row.
Message Composer With Attachmentssv-particles · Svelte
AI Content Creator Card v2D2Studio UI · ReactGlassmorphic AI content generator card with content type and tone pickers and a prompt field.
Pricing 01 - Startup Pricing PlansShadcn Space · ReactA clean two tier pricing section with feature comparison, highlighted plans, and strong CTAs, suited for agencies…
ConfirmationAI Elements (Svelte) · SvelteA confirmation workflow component for tool approval states, request and response rendering, and action handling.
ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
Message ScrollerCojeev UI · ReactKeeps a conversation near its latest content while allowing readers to scroll back without being pulled down.
Search Input With Loader And Voicesv-particles · Svelte
Siri Prompt InputD2Studio UI · ReactTabbed AI prompt input with assistant, blog and pro modes plus file upload.
Skeleton 06 - Chat ConversationShadcn Space · ReactChat skeleton with a contact header, incoming and outgoing message bubbles of varied length, and a message composer.
ContextAI Elements (Svelte) · SvelteA hover-card-based context window usage component with token, cost, and model usage breakdowns.
ChatGPT ActivityNotra · ReactThe search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar.
TextareaCojeev UI · ReactCollects multiline text and offers composer and character-count parts for longer input.
AI Writing AssistantD2Studio UI · ReactAI writing assistant panel with assistant, blog and pro modes and a prompt field.
Textarea 10 - AI Prompt ComposerShadcn Space · ReactChat prompt box where Enter sends and Shift + Enter adds a line, with attach and model buttons, a stop button while…
ConversationAI Elements (Svelte) · SvelteA sticky-bottom conversation container with empty state and scroll-to-bottom controls for chat interfaces.
ChatGPT ComposerNotra · ReactThe pill-shaped Ask anything input with model picker and send button.
Inline CitationAI Elements (Svelte) · SvelteAn inline citation system with hover cards and carousel views for source-backed AI content.
ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
ChatGPT Model SelectorNotra · ReactThe hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu.
Model SelectorAI Elements (Svelte) · SvelteA searchable model selector dialog built on command and dialog primitives.
ChatGPT ReasoningNotra · ReactThe collapsible "Worked for Ns" trace, built on shadcn Collapsible.
PlanAI Elements (Svelte) · SvelteA plan card component with collapsible content and streaming-aware description shimmer.
ChatGPT SearchNotra · ReactThe "Searched N websites" line, built on shadcn Button.
Prompt InputAI Elements (Svelte) · SvelteA composable prompt input surface with attachments, action menus, and provider-driven text handling.
ChatGPT Source ChipNotra · ReactAn inline citation pill with a hover card.
QueueAI Elements (Svelte) · SvelteA structured queue view with sections, items, attachments, and action controls.
ChatGPT ThinkingNotra · ReactThe shimmering Thinking placeholder.
ReasoningAI Elements (Svelte) · SvelteA collapsible reasoning block that tracks streaming duration and renders a markdown response.
ChatGPT ThreadNotra · ReactThe ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer.
SourcesAI Elements (Svelte) · SvelteA collapsible sources list for rendering cited links and source groups.
ClaudeNotra · ReactA full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on…
SuggestionAI Elements (Svelte) · SvelteA compact suggestion button set for displaying prompt ideas and quick actions.
Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
TaskAI Elements (Svelte) · SvelteA collapsible task panel for tracking task state and nested task items.
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
ToolAI Elements (Svelte) · SvelteA collapsible tool call block with parameter and result rendering.
Claude Code ThinkingNotra · ReactThe dim "∴ Thinking…" line that expands to the thoughts.
Web PreviewAI Elements (Svelte) · SvelteA browser-style preview frame with navigation controls and a log console.
Claude Code Todo ListNotra · ReactThe Update Todos tool call with done, active and pending items.
Claude Code Tool CallNotra · ReactTool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary.
Claude ComposerNotra · ReactThe claude.ai message box with model picker, dictation and a morphing send button, built on shadcn Button and…
Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
Claude Model SelectorNotra · ReactA hover-open model and effort picker built on shadcn DropdownMenu.
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.
Claude ThinkingNotra · ReactThe animated spinner and rotating verb Claude shows before replying.
Codex ComposerNotra · ReactThe prompt band with a block cursor, the model and directory status line and shortcut hints.
Codex ExecNotra · ReactA Ran cell with shell syntax colors and output folded behind + N lines.
Codex ExploredNotra · ReactGrouped Read, Search and List calls with a + Show details fold.
Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
Codex ReasoningNotra · ReactThe dim italic summary Codex shows while it reasons.
Codex WorkingNotra · ReactThe shimmering Working (13s • esc to interrupt) status line.
GeminiNotra · ReactA full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.
Gemini ComposerNotra · ReactGemini's pill input with a model picker and a morphing send button.
Gemini MessageNotra · ReactGemini's user pill and bubble-less assistant turn.
Gemini Model SelectorNotra · ReactThe Gemini model chip and menu built on shadcn DropdownMenu.
Gemini Source ChipNotra · ReactAn inline source pill with a hover card.
Gemini ThinkingNotra · ReactThe animated Gemini sparkle with a shimmering status label.
Gemini ThoughtsNotra · ReactThe "Show thinking" step with thoughts and searches.
OpenCode ActivityNotra · ReactOrange thoughts with a live Thinking spinner, plus muted read, web search and tool lines.
OpenCode ComposerNotra · ReactThe prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.
OpenCode MessageNotra · ReactUser prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.
OpenCode SidebarNotra · ReactSession title, context usage, a collapsible MCP list, LSP state, cwd with branch and version.
OpenCode SourcesNotra · ReactWeb search lines and a collapsible cited-sources list with an optional sequenced reveal.
PerplexityNotra · ReactA full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable…
Perplexity CitationNotra · ReactAn inline source pill with favicon, label and +N count, built on shadcn Badge.
Perplexity ComposerNotra · ReactThe follow-up input with Search/Research focus menu, model selector, voice and send/stop buttons.
Perplexity MessageNotra · ReactUser pill and assistant answer turn with search and action slots.
Perplexity Model SelectorNotra · ReactThe Model chip and its provider list with Max/New badges and locks, built on shadcn DropdownMenu.
Perplexity Rewrite PanelNotra · ReactThe mode and model list with a Rewrite button.
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.
Perplexity ThinkingNotra · ReactThe shimmering Thinking... status shown before a search.
Libraries with shadcn/ui ai element components
Related categories
- AI Element Components
- React AI Element Components
- Tailwind CSS AI Element Components
- Svelte AI Element Components
- Animated 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 Sources Components
- shadcn/ui Tool Call Components