Skip to content
Chat

ChatMessageList

Accessible message log region with density-based spacing.

React source Core source

ChatMessageList

Presentational container for chat messages — a role="log" / aria-live="polite" region with density-based spacing.

Examples

Default

There is no @var-ui/astro ChatMessageList — Astro and HTML previews use the core recipe log markup.

Hello! How can I help?
What components ship in var-ui?
Demo.tsxtsx
import { ChatMessage, ChatMessageBubble, ChatMessageList } from '@var-ui/react';

<ChatMessageList>
  <ChatMessage sender="assistant">
    <ChatMessageBubble>Hello! How can I help?</ChatMessageBubble>
  </ChatMessage>
  <ChatMessage sender="user">
    <ChatMessageBubble>What components ship in var-ui?</ChatMessageBubble>
  </ChatMessage>
</ChatMessageList>

Props

Accessibility

Sets aria-busy on the log region while isStreaming is true so assistive tech waits for the full message instead of re-announcing every streamed token.