ChatWindow

Full chat layout container with slot-based header, scrollable message area with auto-scroll, and footer for input.

View source Installation

Preview

Full Chat Layout

Alice ChenOnline

Today

Alice10:30 AM

Hey! Have you checked out the new chat components?

10:31 AM

Yes, they look great! Love the theming support.

Alice10:32 AM

Right? Works perfectly with all the VelocityUI themes.

10:33 AM

The AI variant is super useful for my project too.

Import

import { ChatWindow } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
header	`ReactNode`	—	Content rendered as the sticky header.
footer	`ReactNode`	—	Content rendered as the sticky footer (typically ChatInput).
autoScroll	`boolean`	`true`	Automatically scrolls to the bottom when children change.
children	`ReactNode`	—	Message area content.

Examples

Complete Chat Layout

import { ChatWindow, ChatHeader, ChatBubble, ChatInput } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ height: '400px' }}>
      <ChatWindow
        header={<ChatHeader title="Alice" subtitle="Online" />}
        footer={<ChatInput onSend={(msg) => console.log(msg)} />}
      >
        <ChatBubble variant="received" username="Alice">Hello!</ChatBubble>
        <ChatBubble variant="sent">Hi there!</ChatBubble>
      </ChatWindow>
    </div>
  )
}

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