realtime pattern
Chat — sidebar
Left rail listing conversations.
When to use it
/chat — list of channels or DMs alongside the active thread.
- Conversation switch in 1 tap
- Unread indicators clear
- Search for conversation
Layout regions
- sidebar
- header
- Search + new chat button
- list
- Conversations sorted by last activity
States
- default
- Conversations listed
- empty
- No conversations yet
- partial
- Search filtering
Example
<Sidebar><SearchHeader /><List>{conversations.map((c) => <ConversationRow key={c.id} {...c} />)}</List></Sidebar>The full Chat — sidebar pattern specifies 1 exact microcopy string, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.