Chat Page Components

Dev Design Library indexes 19 chat page components from 12 open-source UI libraries, with the most coming from Notra, AI CSS, beUI, BoardUI and SpaceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Chat page components belong to the Pages group.

• ChatdaisyUI · CSS (Tailwind)
• Chatcoss ui · ReactComposable chat components with messages, reactions, replies, and delivery states.
• Chat AppbeUI · ReactA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code…
• 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…
• Agent ChatBoardUI · React
• ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
• Template AiShark UI · React
• Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
• Chat BlockLocalMode · ReactThe flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with…
• Chat RoomPin UI · React
• Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
• ClaudeNotra · ReactA full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on…
• Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
• CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
• GeminiNotra · ReactA full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.
• Google AI OverviewNotra · ReactA full recreation of Google's AI Overview built from the AI Overview components on shadcn Base UI.
• OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
• PerplexityNotra · ReactA full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable…

Libraries with chat page components

• Notra
• AI CSS
• beUI
• BoardUI
• SpaceUI

Related categories

• React Chat Page Components
• Tailwind CSS Chat Page Components
• Animated Chat Page Components
• shadcn/ui Chat Page Components
• Page Components
• Dashboard Page Components
• Login Page Components
• Onboarding Page Components
• Settings Page Components
• Error Page Components
• Product Page Components
• Signup Page Components
• Landing Page Components
• Calendar Page Components
• Profile Page Components