Chat (Web app)
Communication & Notifications · 7 checks · 31 resources
The in-product conversation panel where message provenance and attachments must stay legible.
Before you ship
- 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
- AI Elements · Vercel's 47-component shadcn registry for chat, agent, voice and workflow UIsAI Interface KitsS
- assistant-ui · React chat primitives and shadcn-installable UI for LLM apps, copilots, and agentsAI Interface KitsS
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templatesComponent LibrariesS
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themesComponent LibrariesS
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skillsComponent LibrariesS
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent KitComponent LibrariesS
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLIComponent LibrariesS
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP serverComponent LibrariesS
- affectUI · 93 React components, screens, and blocks for AI products, each one dependency-free fileAI Interface KitsA
- AIcss · 14 copy-paste AI-conversation UI components in React, Vue and Svelte, plain CSSAI Interface KitsA
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registryComponent LibrariesA
- brainless · Claude Code, Codex and Grok terminal UIs as shadcn componentsAI Interface KitsA
- ElevenLabs UI · First-party shadcn registry for voice agents: orbs, waveforms, transcriptsAI Interface KitsA
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kitsDesign Systems & Brand GuidelinesA
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocksComponent LibrariesA
- LiveKit Agents UI · shadcn registry of voice-agent UI: visualizers, control bar, transcriptAI Interface KitsA
- OpenUI · MIT generative-UI framework: streaming UI language, component library, chat shellAI Interface KitsA
- Shadcn Space · 401+ shadcn blocks, 393+ component variants and 10 site templates, freemiumBlocks, Templates & ThemesA
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UIComponent LibrariesA
- SmoothUI · 130 animated React components including 33 text effects and 16 shader transitionsMotion & InteractionA
- Spectrum UI · 255 shadcn registry items, 62 component guides, 34 blocks and an MCP installerComponent LibrariesA
- Supabase UI Library · shadcn registry of blocks that wire a UI straight into Supabase auth, storage and realtimeComponent LibrariesA
- AICSS · 14 copy-paste agent-chat components in React, Vue and Svelte with plain CSS, 9 freeAI Interface KitsB
- Beautiful UI · 20 MIT interaction patterns for agent UIs: thinking, streaming, approvals, diffsAI Interface KitsB
- Cossistant · Open-source AI and human support widget framework for React and Next.js appsAI Interface KitsB
- Facehash · Deterministic CSS-drawn avatar faces from any string, zero runtime dependenciesComponent LibrariesB
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfacesAI Interface KitsB
- MVPBlocks · 100+ copy-paste Next.js + Tailwind marketing and dashboard blocks, plus 7 templatesBlocks, Templates & ThemesB
- MVPBlocks (source repo) · BSD-3 source for the MVPBlocks block library and its Next.js docs siteBlocks, Templates & ThemesB
- nauvalazhar/ai · 48 owned-source React components for agentic AI apps, on Base UI + Tailwind v4AI Interface KitsB
- Soft Club UI · 118 Radix-based React components in a late-90s dark-glass aestheticComponent LibrariesB