ChatHeader

Top bar for a chat window displaying conversation title, avatar with status indicator, subtitle, and action button slots.

View source Installation

Preview

Basic

Alice ChenOnline

With Back Button

Team Chat3 members

Away Status

Bob SmithAway

Import

import { ChatHeader } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
title	`string`	—	Main title (user or channel name).
subtitle	`string`	—	Secondary text (e.g. "Online" or member count).
avatar	`ReactNode`	—	Avatar element.
status	`'online' \| 'offline' \| 'away'`	—	Status dot overlay on the avatar.
actions	`ReactNode`	—	Action buttons rendered on the right side.
onBack	`() => void`	—	Shows a back arrow button when provided.

Examples

Basic Header

import { ChatHeader } from '@velocityuikit/velocityui'

export default function Example() {
  return <ChatHeader title="Alice" subtitle="Online" status="online" />
}

With Back Button

import { ChatHeader } from '@velocityuikit/velocityui'

export default function Example() {
  return <ChatHeader title="Team Chat" subtitle="3 members" onBack={() => {}} />
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */