Dev Design LibraryAI Element Components
Dev Design Library indexes 464 ai element components from 60 open-source UI libraries, with the most coming from Notra, LocalMode, ShaderCN, Halaska UI and ReUI. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 464, a mix from every library. Open a library to see all of its components.
Attachmentshadcn/ui · ReactDisplays a file or image attachment with media, metadata, upload state, and actions.
OrbReact Bits · ReactFloating energy orb with customizable hover effect.
Ai Attachment GridReact 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
Image Generation Placeholdertransitions.dev · HTML/CSS- Bot AvatarsLibraries.dev · ReactAnimated bot avatars for React — eighteen glossy 3D shapes with living faces that turn, hop and flip, three states…
Single file attachment in an assistant replyReUI · ReactSingle file attachment in an assistant reply
AI Prompt Input StudioAmicro Micro Transitions · ReactDynamic auto-expanding AI textarea with model switcher, live voice dictation wave pulse, web search & deep thinking…
AgentAI Elements · ReactA composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
Html PreviewLobe UI · ReactHtmlPreview renders LLM-generated HTML inline using a hardened iframe sandbox. It mirrors how Mermaid is embedded in…
AI AttachmentKokonut UI · ReactA file dropped into the chat uploads, then the assistant reads it page by page. Page citations in the answer light up…
Canvas CursorCursify · React
Agent ActivitybeUI · ReactRenders progressive agent work as message content.
Fluid OrbRare UI · ReactAn animated WebGL orb with drifting fluid shading. Supports size and color props.
Agent PlanSpectrum UI · ReactAn editable plan checklist the agent proposes before running.
Fallback AvatarSpell UI · ReactA unique gradient avatar generated from a name string.
File ThumbnailFluid Functionalism · ReactRead-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner…
OrbUser Interface Wiki · React
Ai InputPanel UI · React NativeA prompt composer: a field that grows to five lines, a row of controls, and the sheet they open.
Dialog 13 - Upgrade PlanShadcn Space · ReactUpgrade plan dialog with a yearly billing switch, selectable plan cards, an included features list, and a success state.
Image Shader CanvasPixel Perfect · ReactA reusable image-shader canvas (Three.js) that loads one or two images, exposes time/mouse/progress uniforms and runs…
Audio Recorder WidgetOpenSourceUI · React
Prompt Boxuselayouts · ReactA collapsed chat composer that expands into a textarea with a model menu and send control.
Agent HandoffKinetics · HTML/CSSOne agent hands the live context to the next along a trace
Agent ThinkingBoardUI · ReactAgent thinking indicators for chat composers.
Spell Fallback AvatarAnimations (Svelte) · Svelte
Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
Assistant OrbSwiftPieces · SwiftUIA dark glass ball with a Siri-style voice wave inside, drawn by a Metal shader and locked to the thinking state.
Text StreamObsidianUI · ReactA continuous vertical text stream changes speed and direction with your scroll.
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
Deployment ChecklistGreatUI · React
AI InputNexvyn UI · ReactAI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.
Image LoaderGenerative Loaders · React
AutocompleteShark UI · React
Ai Bot AvatarAI CSS · ReactAn animated AI bot avatar that follows the cursor with its eyes, blinks and reacts to attention.
ORB-01ShaderCN · Reactcut-glass orb with a dispersive, turbulent interior
Live Orb23rd.dev · ReactAn evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
Ai Input 001Watermelon UI · React
Chat threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
Component Previewglasscn · ReactA preview shell for component demos with switchable default and glass variants.
Chat ThreadUI Lab · ReactReplies arrive after a beat of typing, and the thread follows only if you are.
AttachmentHextaUI · ReactFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their…
ArtifactLocalMode · ReactA Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar…
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.
Aisuggestion BadgeHalaska UI · React
Chat Input With Voice And Send Buttonsv-particles · Svelte
Prompt ComposerPin UI · React
AttachmentMetal UI · React + SwiftUIA file someone attached, as a small raised plate: type, name, size or an explicit upload receipt; shared glyphs morph…
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
Aria AttachmentReScript shadcn · ReScript
AI Chat BoxSkecher UI · ReactA polished AI prompt composer with model controls, attachments, and animated interaction states.
AI BlockD2Studio UI · ReactAI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
Agent Loading StatesEaseUI · ReactThree loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
AttachmentFibo · ReactOne added file as a chip or an image thumbnail, with its upload status and buttons to remove or retry.
AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
Image Generation LoaderAceternity UI · React
Message Scrollershadcn/ui · ReactA chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without…
Prompt BarReact Bits · ReactChat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile…
Ai Attachment ListReact Spectrum · React
Security CheckpointCult UI · ReactSecurity checkpoint illustration or component
Reasoning Streamtransitions.dev · HTML/CSS- Thinking OrbsLibraries.dev · ReactDotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light
Composer tray with removable attachmentsReUI · ReactComposer tray with removable attachments
Button MicrophoneAmicro Micro Transitions · React
ArtifactAI Elements · ReactA container component for displaying generated content like code, documents, or other outputs with built-in actions.
Chat Chat Input AreaLobe UI · React
AI Conversation BranchesKokonut UI · ReactA chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump…
Smooth Wavy CanvasCursify · React
Agent DisclosurebeUI · ReactShared transform-only reveal for collapsible agent content.
Grid RevealRare UI · ReactA loading state for AI images that turns into the real picture when it arrives.
Agent StepsSpectrum UI · ReactA timeline of tool calls with status, arguments, results, and parallel sub-steps.
Input MessageFluid Functionalism · ReactChat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible…
AttachmentPanel UI · React NativeFile row with upload states, built on Item.
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…
Shader CanvasPixel Perfect · ReactA reusable full-screen fragment-shader canvas powered by Three.js, with shared GLSL helpers (noise/fbm)…
Discord Chat CardOpenSourceUI · React
Hold To TalkKinetics · HTML/CSSA live waveform blooms while you hold, then commits on release
Composer LoaderBoardUI · ReactOrbiting light band for a working composer.
CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
Attachment TraySwiftPieces · SwiftUIAn attachment strip for composers: a glass add tile opens the photo picker and each pick lands as a tile with a live…
AI Overview CitationNotra · ReactA source chip built on shadcn Badge and HoverCard.
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Inline LoaderGenerative Loaders · React
Template AiShark UI · React
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
ORB-02ShaderCN · Reactornate scrollwork on a rolling dome
Ai Input 002Watermelon UI · React
Email Typo FixUI Lab · ReactCatches gmial.com and fixes it by moving only the letters that were wrong.
Chart ArtifactLocalMode · ReactA dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves…
Agent stateCojeev UI · ReactA sculpted, living status field that changes contour and color as an agent thinks, works, asks for input, or finishes.
Action Receipt PatternHalaska UI · React
Message Composer With Attachmentssv-particles · Svelte
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…
Preview CardSpaceUI · ReactDisplays an informative preview card when users hover over a link, giving them a summary of the linked page before…
Aria Message ScrollerReScript shadcn · ReScript
AI OrbSkecher UI · ReactAn interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces.
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.
AI AsistantReactFrame · ReactA dotted status light with two layouts, Mesh grid and Halo rings, across three animated states (Waiting, Listening…
Placeholders And Vanish InputAceternity UI · React
Voice PillReact Bits · ReactMic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or…
Ai ChatReact Spectrum · React
Streaming Texttransitions.dev · HTML/CSS- Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
Image thumbnails in a snapping stripReUI · ReactImage thumbnails in a snapping strip
AttachmentsAI Elements · ReactA flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
Chat Chat ItemLobe UI · React
AI Inline CitationsKokonut UI · ReactAn answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
Matrix OrbRare UI · ReactA dot-matrix orb that animates through idle, listening and thinking states.
AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
Queued message stackFluid Functionalism · ReactSonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a…
Image GenerationPanel UI · React NativeThe place an image will be, while it is being made.
Pricing 01 - Startup Pricing PlansShadcn Space · ReactA clean two tier pricing section with feature comparison, highlighted plans, and strong CTAs, suited for agencies…
Recorder Face WidgetOpenSourceUI · React
Libraries with ai element components
Related categories
- React AI Element Components
- Tailwind CSS AI Element Components
- Svelte AI Element Components
- Animated AI Element Components
- shadcn/ui 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
- Sources Components
- Streaming Text Components
- Reasoning Components
- AI Message Components
- Citation Components
- Suggestions Components
- Task Queue Components
- Agent Plan Components