Dev Design LibraryReact AI Element Components
Dev Design Library indexes 428 React ai element components from 54 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. Every library in this list targets React.
Showing 120 of 428, 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- 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 ThinkingBoardUI · ReactAgent thinking indicators for chat composers.
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
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- 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
Composer LoaderBoardUI · ReactOrbiting light band for a working composer.
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
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- 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
Agent ChatBoardUI · React
ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
Fluid OrbNexvyn UI · ReactA WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
Text LoaderGenerative Loaders · React
Message ActionsAI CSS · React
ORB-03ShaderCN · Reacta turbulent belt of light girdling the ball, contoured in rainbow
Ai Input 003Watermelon UI · React
Voice OrbUI Lab · ReactA glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks.
Data Table ArtifactLocalMode · ReactA generic sortable data table for local row data — VectorDB results, model catalogs, evaluation rows, or…
AttachmentCojeev UI · ReactPresents a file name, type, metadata, and nearby actions as a compact attachment row.
Agent Chat PatternHalaska UI · React
Preview Link CardSpaceUI · ReactDisplays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.
Libraries with React ai element components
Related categories
- AI Element Components
- Tailwind CSS AI Element Components
- Svelte AI Element Components
- Animated AI Element Components
- shadcn/ui AI Element Components
- React Prompt Input Components
- React AI Orb Components
- React Conversation Components
- React Attachment Components
- React Thinking Indicator Components
- React Model Selector Components
- React Voice Input Components
- React Sources Components
- React Tool Call Components
- React Streaming Text Components
- React Citation Components
- React AI Message Components
- React Reasoning Components
- React Suggestions Components
- React Task Queue Components
- React Agent Plan Components