Dev Design LibraryAnimated Chat Page Components
Dev Design Library indexes 8 Animated chat page components from 6 open-source UI libraries, with the most coming from Notra, AI CSS, SpaceUI, Shadcn Space and Pin UI. 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 chat page components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Chat page components belong to the Pages group.
Dropdown Menu 03 - Voice ChatShadcn Space · ReactA voice chat dropdown with avatar previews, real-time search, and smooth layout animations.
Chat UiPixel Perfect · ReactA streaming chat UI built on MessageScroller — anchored turns, follow-the-edge auto-scroll, a dot-matrix thinking…
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
Chat RoomPin UI · React
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
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.