Chat Message List

A chat message list with user and assistant bubbles, avatars, and timestamps. Alternates alignment based on the role field — user messages are right-aligned, assistant messages left.

Alice9:00 AM

Can you explain how the token system works in Aether UI?

Aether AI9:01 AM

Sure! Tokens are design primitives — colours, spacing, radii — defined as CSS variables. Components reference these variables instead of hardcoded values, which is what makes theming work.

Alice9:02 AM

How do I override a token in my project?

Aether AI9:03 AM

Add a CSS rule in your global stylesheet that redefines the variable under the :root selector (or under .dark for dark-mode overrides). For example: --color-primary: oklch(55% 0.22 270);

import { ChatMessageList } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add chat-message-list

Import

import.tsx

import { ChatMessageList } from "@aetherstack/patterns"

Usage

chat-message-list.tsx

import { ChatMessageList } from "@aetherstack/patterns"

const messages = [
  {
    id: "1",
    role: "user" as const,
    content: "What is Aether UI?",
    timestamp: new Date(),
    name: "Alice",
  },
  {
    id: "2",
    role: "assistant" as const,
    content: "Aether UI is a premium open-code design system built on shadcn/ui primitives.",
    timestamp: new Date(),
    name: "Assistant",
  },
]

export function MyChatView() {
  return <ChatMessageList messages={messages} />
}

Props

Prop	Type	Default	Description
messages*	ChatMessage[]	—	Array of message objects. Each has id, role ("user" \| "assistant"), content, timestamp, and optional name and avatarUrl.
className	string	—	Additional classes on the list container.

* Required

Accessibility

→The list renders as a <ul> with each message as a <li> in document order.
→Avatars use role="img" with an aria-label of the sender's name.
→Timestamps use <time datetime> with a machine-readable ISO string.
→Message content is plain text; for markdown, pipe it through MarkdownRenderer.