ChatThread

Thread summary with reply count, participant avatars, and expandable content area for viewing threaded replies in team chat.

View source Installation

Preview

Expanded Thread

Bob

Great idea! I think we should go with option A.

Carol

Agreed, option A makes more sense.

Dave

Ship it!

Collapsed Thread

Import

import { ChatThread } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
replyCount	`number`	`0`	Number of replies in the thread.
lastReplyTimestamp	`string`	—	Timestamp of the most recent reply.
participants	`ReactNode[]`	`[]`	Array of avatar elements for thread participants.
expanded	`boolean`	`false`	Whether the thread content is visible.
onToggle	`() => void`	—	Called when the thread summary is clicked.
children	`ReactNode`	—	Thread content shown when expanded.

Examples

Basic Thread

import { ChatThread, ChatBubble } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <ChatThread replyCount={3} lastReplyTimestamp="2 min ago" expanded>
      <ChatBubble variant="received" username="Bob">Great idea!</ChatBubble>
      <ChatBubble variant="received" username="Carol">I agree</ChatBubble>
    </ChatThread>
  )
}

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 */