Model Selector Components

Dev Design Library indexes 26 model selector components from 12 open-source UI libraries, with the most coming from LocalMode, Notra, Spectrum UI, Kokonut 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. Model selector components belong to the AI group.

• Model SelectorAI Elements · ReactA searchable command palette for selecting AI models in your chat interface.
• AI Model SelectorKokonut UI · ReactPick a model and how hard it thinks. Effort is a detent track that reshapes for each model and keeps your level when…
• Input ModelSpectrum UI · Reactcomponent for the Input Model Demo
• Web Model PickerPanel UI · React NativeAn AI model picker with logos and context, speed, intelligence and price per model.
• Prompt Boxuselayouts · ReactA collapsed chat composer that expands into a textarea with a model menu and send control.
• Model SelectorAI Elements (Svelte) · SvelteA searchable model selector dialog built on command and dialog primitives.
• ChatGPT Model SelectorNotra · ReactThe hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu.
• Select Ai AgentWatermelon UI · React
• Voice PickerLocalMode · ReactLanguage-grouped TTS voice selection from one KokoroVoice[] contract — a compact grouped <select> (VoicePicker) plus…
• AI ComposerROI UI · ReactAn AI chat input component with mode selector and action buttons.
• Model Context PatternHalaska UI · React
• AI Chat BoxSkecher UI · ReactA polished AI prompt composer with model controls, attachments, and animated interaction states.
• Prompt InputAI Elements · ReactAllows a user to send a message with file attachments to a large language model. It includes a textarea, file upload…
• 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…
• Model SelectorSpectrum UI · ReactA model picker as a radio list or segmented control, with badges and disabled states.
• Claude Model SelectorNotra · ReactA hover-open model and effort picker built on shadcn DropdownMenu.
• Select Ai Agent BaseWatermelon UI · React
• Chat BlockLocalMode · ReactThe flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with…
• Prompt ComposerSpectrum UI · ReactA prompt input with attachments, a model picker, and a stop state.
• Gemini Model SelectorNotra · ReactThe Gemini model chip and menu built on shadcn DropdownMenu.
• GGUF Explorer BlockLocalMode · ReactBrowse 160,000+ HuggingFace GGUF models and the curated wllama catalog, inspect any file's metadata via a ~4KB HTTP…
• Perplexity Model SelectorNotra · ReactThe Model chip and its provider list with Max/New badges and locks, built on shadcn DropdownMenu.
• Model Advisor BlockLocalMode · ReactRanked on-device model recommendations that compute their OWN device context via useCapabilities and rank…
• Perplexity Rewrite PanelNotra · ReactThe mode and model list with a Rewrite button.
• Model Search BrowserLocalMode · ReactA cmdk-based searchable model-repo browser: a controlled search input, a sort selector…
• Model SelectorLocalMode · ReactA device-aware model picker: a list grouped by category, backend filter chips (WebGPU/ONNX/WASM/LiteRT) with live…

Libraries with model selector components

• LocalMode
• Notra
• Spectrum UI
• Kokonut UI
• AI Elements

Related categories

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