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
- list
States
- default
- empty
- partial
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.