All components
Browse every component shipped with the Chat package.
Start with ChatBox for a complete drop-in surface, or compose ChatConversation, ChatMessageList, and ChatComposer yourself; everything below the compound level is a slot you can replace. New to the package? Read the Overview and Quickstart, then see Structure for slots and composition. All components implement the shared keyboard-navigation and screen-reader model—see Accessibility.
Each card carries a role chip:
- Core — the single top-level entry point (
ChatBox). - Compound — self-sufficient building blocks that render a full region and accept slots.
- Slot — replaceable child parts of a compound component; override via the parent's
slotsprop or compose directly. - State — components that surface runtime state (typing, unread, errors, scroll position).
- Presentational — stateless display pieces you can use anywhere, even outside a Chat surface.
Full surfaces
Reach for these when you want a working chat with minimal wiring—ChatBox is the batteries-included entry point, while ChatConversation is for when you bring your own shell:
Layout and navigation
The shell around messages: conversation chrome, header slots (info, title, subtitle, actions), and the inbox-style conversation list for multi-conversation apps:
Messages
The message stack from list to group to message, plus the slots inside each bubble; reach for a slot when restyling a single part instead of replacing the whole message:
Composer
Build the prompt form from a label, text area, attachment controls, toolbar, send button, and helper text—swap any slot to restyle one part without rebuilding the form:
States
Transient runtime affordances—use these when the conversation is loading, someone is typing, or the user has scrolled away: suggestions, typing indicators, unread markers, loading skeletons, date dividers, and scroll affordances:
AI and rich content
Presentational renderers for AI output—citations, code blocks, approval prompts, and other building blocks you can drop into custom message content without tying them to the runtime: