Dev Design LibraryTailwind CSS AI Element Components
Dev Design Library indexes 357 Tailwind CSS ai element components from 46 open-source UI libraries, with the most coming from Notra, LocalMode, ReUI, AI Elements and Spectrum UI. 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 styles its components with Tailwind CSS utility classes.
Showing 120 of 357, 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.
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.
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…
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.
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…
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.
AutocompleteShark UI · React
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
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…
Vanish InputVelora UI · ReactSearch field whose placeholder cycles while empty.
Chat Input With Voice And Send Buttonsv-particles · Svelte
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…
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…
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.
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.
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.
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Template AiShark UI · React
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.
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…
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
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.
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
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…
Fluid OrbNexvyn UI · ReactA WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
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.
Search Input With Loader And Voicesv-particles · Svelte
Preview Link CardSpaceUI · ReactDisplays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.
Streaming TextSkecher UI · ReactA soft word-by-word text reveal for hero copy, onboarding, and editorial interfaces.
AI Content Creator Card v2D2Studio UI · ReactGlassmorphic AI content generator card with content type and tone pickers and a prompt field.
Streaming ResponseEaseUI · ReactWraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list…
Message ListFibo · ReactA conversation that groups each person's messages under one heading, with a single tab stop.
AI Edit ReviewReactFrame · ReactAn AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and…
Ai Message FeedbackReact Spectrum · React- Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
Three sizes carrying three levels of an answerReUI · ReactThree sizes carrying three levels of an answer
Chain Of ThoughtAI Elements · ReactA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
AI ConnectKokonut UI · ReactA tool call that stops because an app is not connected. Connect it right in the message, and the call picks up where…
Approval CardbeUI · ReactCollects structured human input during a paused run.
Approval CardSpectrum UI · ReactA human-in-the-loop approval for an action an agent wants to take.
Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
PlanPanel UI · React NativeWhat an agent intends to do, before it does it.
Skeleton 06 - Chat ConversationShadcn Space · ReactChat skeleton with a contact header, incoming and outgoing message bubbles of varied length, and a message composer.
Voice Assistant WidgetOpenSourceUI · React
ContextAI Elements (Svelte) · SvelteA hover-card-based context window usage component with token, cost, and model usage breakdowns.
Libraries with Tailwind CSS ai element components
Related categories
- AI Element Components
- React AI Element Components
- Svelte AI Element Components
- Animated AI Element Components
- shadcn/ui AI Element Components
- Tailwind CSS Prompt Input Components
- Tailwind CSS Conversation Components
- Tailwind CSS Attachment Components
- Tailwind CSS Voice Input Components
- Tailwind CSS Model Selector Components
- Tailwind CSS Thinking Indicator Components
- Tailwind CSS Tool Call Components
- Tailwind CSS Sources Components
- Tailwind CSS Citation Components
- Tailwind CSS AI Message Components
- Tailwind CSS Reasoning Components
- Tailwind CSS AI Orb Components
- Tailwind CSS Streaming Text Components
- Tailwind CSS Suggestions Components
- Tailwind CSS Task Queue Components
- Tailwind CSS Agent Plan Components