Centrim Design System — a token-first, accessible React component system.
Chat
A conversation screen on one continuous surface: conversations, thread and composer separated by hairlines only.
What it demonstrates
- Three regions with no nested panels, shadows or competing surfaces
- Own versus other messages distinguished by alignment, surface and a visible author label
- A composer assembled from Textarea, IconButton and Button — no bespoke input
- Send disabled until there is something to send, with the keyboard contract stated
How to adapt it
- Author and timestamp stay visible — alignment alone is not accessible.
- Keep the composer anchored and quiet; it is a tool, not a feature panel.
- Below lg the conversation list becomes a separate view rather than a squeezed column.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.