ChatHeader

ChatHeader

<ChatHeader
  avatar={
    <span style={{ position: 'relative' }}>
      <Avatar fallback="AL" />
      <PresenceDot attached status="online" />
    </span>
  }
  title="Alice Liddell"
  subtitle="Active now"
  actions={
    <>
      <IconButton aria-label="Search"><Search /></IconButton>
      <IconButton aria-label="More"><Dots /></IconButton>
    </>
  }
/>

Install: @helixui/core

import { ChatHeader } from '@helixui/core'

status: stable · since: 0.3.0

Tags: conversation, top-bar, identity

Anatomy

┌──── ●  Sara Tang   typing…   ──── [⋮][📞] ┐

Layout

• display — flex
• width — fill
• height — content
• intrinsicSize — ~56px tall, full width
• stackable — false
• fullBleed — true

Visual

A horizontal bar with a leading Avatar, a title with optional subtitle (online status, typing), and right-aligned action icons. Border-bottom by border.default separates it from the message list.

Props

Name	Type	Default	Description
avatar	ReactNode	—	Avatar rendered on the left. May contain a PresenceDot.
title	ReactNode	—	Conversation title — channel name, person, AI assistant.
subtitle	ReactNode	—	Member count, presence text, model name.
actions	ReactNode	—	Right-aligned IconButtons / Buttons — call, search, more.

Tokens used

color.bg.surface.default, color.border.default, color.text.primary, color.text.muted, space.1, space.3, space.4, font.family.sans, font.size.xs, font.size.md, font.weight.semibold

Accessibility

Notes

• Renders as <header>. The title is plain content — wrap in a heading tag if appropriate (<Text as="h2">).

Composes with

Component	Relation	Note
Avatar	child	Leading slot.
IconButton	child	Right-aligned actions.
ChatList	sibling	Sits above the chat list.
ChatComposer	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

one-on-one chat header

“header with avatar, name, online dot”

<ChatHeader avatar={<Avatar fallback="ST" />} title="Sara" subtitle="online" />

Related

• ChatList
• ChatComposer