Dev Design LibraryPrompt Input Components
Dev Design Library indexes 67 prompt input components from 37 open-source UI libraries, with the most coming from Watermelon UI, Notra, Spectrum UI, D2Studio UI and Lobe UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Prompt input components belong to the AI group.
Prompt BarReact Bits · ReactChat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile…
Ai ChatReact Spectrum · React
Composercoss ui · ReactA composer for chat and AI assistant interfaces, with a growing input, persistent actions, and optional mentions or…
Prompt ComposerCult UI · ReactMultiline prompt field with shader avatar, staggered placeholder, loading line, and send/attach chrome
Chat composerReUI · ReactA chat composer that inserts emoji at the caret and keeps the draft in view.
AI Prompt Input StudioAmicro Micro Transitions · ReactDynamic auto-expanding AI textarea with model switcher, live voice dictation wave pulse, web search & deep thinking…
Prompt InputAI Elements · ReactAllows a user to send a message with file attachments to a large language model. It includes a textarea, file upload…
Chat Chat Input AreaLobe UI · React
AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
Chat AppbeUI · ReactA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code…
AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
Input MessageFluid Functionalism · ReactChat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible…
Ai InputPanel UI · React NativeA prompt composer: a field that grows to five lines, a row of controls, and the sheet they open.
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…
Prompt Boxuselayouts · ReactA collapsed chat composer that expands into a textarea with a model menu and send control.
Prompt ComposerKinetics · HTML/CSSAn AI input grows with the thought, then commits to a run
Agent ChatBoardUI · React
Prompt InputAI Elements (Svelte) · SvelteA composable prompt input surface with attachments, action menus, and provider-driven text handling.
ChatGPT ComposerNotra · ReactThe pill-shaped Ask anything input with model picker and send button.
AI InputNexvyn UI · ReactAI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.
Template AiShark UI · React
Ai Input 001Watermelon UI · React
Chat threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
Chat BlockLocalMode · ReactThe flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with…
Agent chatCojeev UI · ReactA composable agent conversation with a bounded thread, draft composer, attachments, progress, explicit permissions and…
AI ComposerROI UI · ReactAn AI chat input component with mode selector and action buttons.
Vanish InputVelora UI · ReactSearch field whose placeholder cycles while empty.
Agent Chat PatternHalaska UI · React
Chat Input With Voice And Send Buttonsv-particles · Svelte
Prompt ComposerPin UI · React
AI composerMetal UI · React + SwiftUIA chat block: a composer that grows, attachments, a model choice, and replies that stream in word by word with stop…
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
AI Chat BoxSkecher UI · ReactA polished AI prompt composer with model controls, attachments, and animated interaction states.
AI Content Creator CardD2Studio UI · ReactPro version content creation card
Prompt InputEaseUI · ReactA chat composer that grows with its content, submits on Enter, and crossfades its send button into a stop button while…
Chat ComposerFibo · ReactA message box built from parts around one draft, so each chat surface composes its own.
Placeholders And Vanish InputAceternity UI · React
Ai Prompt FieldReact Spectrum · React
Chat Message InputLobe UI · React
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…
Prompt InputbeUI · ReactCan anchor the composer beneath active resource content.
Input ModelSpectrum UI · Reactcomponent for the Input Model Demo
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
Ai Input 002Watermelon UI · React
Document QA BlockLocalMode · ReactExtractive question answering (Xenova/distilbert-base-cased-distilled-squad, grounding corpus context via…
Conversation panelCojeev UI · ReactA reusable conversation panel composed from Cojeev base components.
Prompt Input PatternHalaska UI · React
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.
Mobile Chat Input AreaLobe UI · React
Metal Prompt BarSpectrum UI · ReactAn AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it.
Claude ComposerNotra · ReactThe claude.ai message box with model picker, dictation and a morphing send button, built on shadcn Button and…
Ai Input 003Watermelon UI · React
Prompt InputLocalMode · ReactForm-based, auto-resizing chat composer: Enter submits, Shift+Enter inserts a newline, the submit control swaps to a…
TextareaCojeev UI · ReactCollects multiline text and offers composer and character-count parts for longer input.
Siri Prompt InputD2Studio UI · ReactTabbed AI prompt input with assistant, blog and pro modes plus file upload.
Prompt ComposerSpectrum UI · ReactA prompt input with attachments, a model picker, and a stop state.
Codex ComposerNotra · ReactThe prompt band with a block cursor, the model and directory status line and shortcut hints.
Ai Input 004Watermelon UI · React
AI Writing AssistantD2Studio UI · ReactAI writing assistant panel with assistant, blog and pro modes and a prompt field.
Gemini ComposerNotra · ReactGemini's pill input with a model picker and a morphing send button.
Ai Input 005Watermelon UI · React
OpenCode ComposerNotra · ReactThe prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.
Contextual Ai BarWatermelon UI · React
Perplexity ComposerNotra · ReactThe follow-up input with Search/Research focus menu, model selector, voice and send/stop buttons.
Morphing Discovery BarWatermelon UI · React
Morphing Discovery Bar BaseWatermelon UI · React
Libraries with prompt input components
Related categories
- React Prompt Input Components
- Tailwind CSS Prompt Input Components
- Animated Prompt Input Components
- shadcn/ui Prompt Input Components
- AI Element Components
- AI Orb Components
- Conversation Components
- Attachment Components
- Thinking Indicator Components
- Voice Input Components
- Model Selector Components
- Tool Call Components
- Sources Components
- Streaming Text Components
- Reasoning Components
- AI Message Components
- Citation Components
- Suggestions Components
- Task Queue Components
- Agent Plan Components