Animated Conversation Components

Dev Design Library indexes 11 Animated conversation components from 9 open-source UI libraries, with the most coming from Notra, Spectrum UI, Kokonut UI, beUI and Arc Library. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the conversation components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Conversation components belong to the AI group.

• Streaming reply with a pending stateReUI · ReactOne assistant row moving from thinking, to typing, to settled.
• 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…
• Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
• AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
• Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
• Chat threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
• Chat ThreadUI Lab · ReactReplies arrive after a beat of typing, and the thread follows only if you are.
• Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
• Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
• CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
• OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.

Libraries with Animated conversation components

• Notra
• Spectrum UI
• Kokonut UI
• beUI
• Arc Library

Related categories

• Conversation Components
• React Conversation Components
• Tailwind CSS Conversation Components
• shadcn/ui Conversation Components
• Animated AI Element Components
• Animated AI Orb Components
• Animated Thinking Indicator Components
• Animated Prompt Input Components
• Animated Streaming Text Components
• Animated Voice Input Components
• Animated Generated Image Components
• Animated Tool Call Components
• Animated Reasoning Components
• Animated Suggestions Components
• Animated Task Queue Components