Dev Design Libraryshadcn/ui Chat Message Components
Dev Design Library indexes 13 shadcn/ui chat message components from 4 open-source UI libraries, with the most coming from Notra, Cojeev UI, HextaUI and AI Elements (Svelte). Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Chat message components belong to the Social group.
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
BubbleCojeev UI · ReactGroups conversational content and timestamps into visually distinct message bubbles.
ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
Message scrollerHextaUI · ReactA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the…
MessageCojeev UI · ReactStructures a conversational or activity entry with a main content area and supporting description.
Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
Gemini MessageNotra · ReactGemini's user pill and bubble-less assistant turn.
OpenCode MessageNotra · ReactUser prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.
Perplexity MessageNotra · ReactUser pill and assistant answer turn with search and action slots.