Chat (Web app)
The in-product conversation panel where message provenance and attachments must stay legible.
Communication & Notifications · 7 checks · 28 resources
Before you ship
7- 01Message thread — a chronological display with the most recent at the bottom, auto-scrolled to latest on load
- 02Message input — a text field supporting multi-line input, typically Shift + Enter for a new line
- 03Sender identification — name and avatar alongside each message, with consecutive messages from the same sender grouped
- 04Timestamps — relative time for recent messages and a full timestamp for older ones
- 05Read receipts — an indicator showing whether the other participant has seen a message
- 06File and media sharing — the ability to attach images, files or links, shown within the conversation
- 07Reactions — emoji reactions on individual messages as a lightweight way to respond without a full reply
Resources that help you build this
28- AI Elements · Vercel's 47-component shadcn registry for chat, agent, voice and workflow UIs
- assistant-ui · React chat primitives and shadcn-installable UI for LLM apps, copilots, and agents
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templates
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skills
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent Kit
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLI
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- AIcss · 14 copy-paste AI-conversation UI components in React, Vue and Svelte, plain CSS
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registry
- brainless · Claude Code, Codex and Grok terminal UIs as shadcn components
- ElevenLabs UI · First-party shadcn registry for voice agents: orbs, waveforms, transcripts
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kits
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocks
- LiveKit Agents UI · shadcn registry of voice-agent UI: visualizers, control bar, transcript
- OpenUI · MIT generative-UI framework: streaming UI language, component library, chat shell
- Shadcn Space · 401+ shadcn blocks, 393+ component variants and 10 site templates, freemium
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- SmoothUI · 130 animated React components including 33 text effects and 16 shader transitions
- Supabase UI Library · shadcn registry of blocks that wire a UI straight into Supabase auth, storage and realtime
- AICSS · 14 copy-paste agent-chat components in React, Vue and Svelte with plain CSS, 9 free
- Beautiful UI · 20 MIT interaction patterns for agent UIs: thinking, streaming, approvals, diffs
- Facehash · Deterministic CSS-drawn avatar faces from any string, zero runtime dependencies
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfaces
- MVPBlocks · 100+ copy-paste Next.js + Tailwind marketing and dashboard blocks, plus 7 templates
- MVPBlocks (source repo) · BSD-3 source for the MVPBlocks block library and its Next.js docs site
- nauvalazhar/ai · 48 owned-source React components for agentic AI apps, on Base UI + Tailwind v4
- Soft Club UI · 118 Radix-based React components in a late-90s dark-glass aesthetic