ChatList

Conversation sidebar listing recent chats with avatars, last message preview, timestamps, unread badges, and online indicators.

View source Installation

Preview

Conversation List

Import

import { ChatList } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
conversations	`ChatConversation[]`	—	Array of conversation objects to display.
activeId	`string`	—	ID of the currently selected conversation.
onSelect	`(id: string) => void`	—	Called when a conversation is clicked.
emptyText	`string`	`'No conversations'`	Text shown when the list is empty.

Examples

Basic Usage

import { ChatList } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <ChatList
      conversations={[
        { id: '1', name: 'Alice', lastMessage: 'See you tomorrow!', timestamp: '2m', unread: 2, online: true },
        { id: '2', name: 'Bob', lastMessage: 'Thanks for the update', timestamp: '1h' },
        { id: '3', name: 'Team Chat', lastMessage: 'New deployment ready', timestamp: '3h', unread: 5 },
      ]}
      activeId="1"
      onSelect={(id) => console.log(id)}
    />
  )
}

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