Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Ctrl k
Search...
Sign up
Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Once UIDocumentationBlog
© Once UI. All rights reserved.
Built with Aveiro

Chat & messaging

Multi-pane chat layouts with channel sidebars, feeds, composers, and streaming replies.
Updated 19d ago
Dashboard & charts
Auth & verification
7 min · Pattern
Chat UIs are multi-pane layouts: channel sidebar, message feed, and optional detail panel. Once UI Pro blocks handle the composition — agents should start from Chat1, not invent bubble markup.

Chat layout zones

A production chat interface has three panes:
Zone
Purpose
Block
Left sidebarChannels, DMs, searchSidebar4
Center feedMessages, threads, composerFeed3
Right panelThread details, members, filesSidebar5
Task bundle: packages/core/ai/tasks/chat.json
Pro block: packages/core/ai/examples/blocks/Chat1.tsx

Three-pane Row

The simplest chat shell is a full-height Row with three children: Sidebar4, Feed3, and Sidebar5. For resizable panes, wrap sections in SplitView — the dev sandbox (apps/dev/src/app/(main)/chat/page.tsx) uses this for adjustable sidebar widths. Install the blocks first: 
npx once-ui add Chat1 Feed3 Sidebar4 Sidebar5
Then adapt imports from the Pro block source.

Message feed patterns

Feed3 uses a thread-without-bubbles style — messages are rows with avatar, name, timestamp, and body text. This reads cleaner in productivity apps (Linear, Discord, Slack) than chat bubbles. Each message row: 
<Row gap="12" fillWidth paddingY="8">
  <Avatar src={message.avatar} size="m" />
  <Column fillWidth gap="4">
    <Row gap="8" vertical="center">
      <Text variant="label-default-s">{message.author}</Text>
      <Text variant="body-default-xs" onBackground="neutral-weak">
        {message.time}
      </Text>
    </Row>
    <Text variant="body-default-m">{message.body}</Text>
  </Column>
</Row>

Composer bar

The input area sits at the bottom of the feed column: 
<Column fillHeight>
  <Row gap="8" padding="16" borderTop="neutral-alpha-weak">
    <Input fillWidth placeholder="Message #general" />
    <IconButton icon="send" variant="primary" aria-label="Send message" />
  </Row>
</Column>
Add EmojiPickerDropdown beside the input for emoji selection — don't build a custom picker.

Scroll and fade edges

Long message lists need scroll affordance. Wrap the message list in a Fade component with edges top and bottom, and put the list inside a Scroller. Fade.edge is a common gotcha — the edges prop must be an array like ["top", "bottom"], not a boolean.

Streaming and agent replies

For AI chat, show activity while the model generates: 
<Row gap="12" vertical="center" paddingY="8">
  <Spinner size="s" />
  <Text variant="body-default-s" onBackground="neutral-weak">
    Thinking…
  </Text>
</Row>
Stream tokens into the message body as they arrive. Keep the composer disabled until the stream completes, or allow the user to cancel with a stop button.

Members view swap

Chat1 swaps the center pane when the user selects "Members" from the sidebar — same shell, different content. Render Table1 with member data instead of Feed3 when the active sidebar item is Members.
This pattern avoids a separate route for every sidebar item.

Quality checklist

Check
Rule
LayoutRow fill — three panes, not nested Columns
ScrollScroller inside Fade with edge strips
AvatarsAvatar with size="m" in message rows
EmojiEmojiPickerDropdown — don't invent picker UI
BadgesOne status badge per row — no duplicate Badge

Agent note

chat.json references blocks Chat1, Feed3, Sidebar4, Sidebar5. Load examples/blocks/Chat1.tsx for structure before generating. Gotcha keys: Fade.edge, Badge.duplicate.

Related

→ App shell navigation → Tables and lists → Loading states