Chat

Chat message bubbles for displaying conversations with avatars and metadata.

Import

import { Chat } from 'asterui'

Examples

Basic Chat

Simple chat bubbles with different positions.

</>

Hey! How are you?

I'm doing great, thanks for asking!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" message="Hey! How are you?" />
        <Chat position="end" message="I'm doing great, thanks for asking!" />
      </div>
    )
}

export default App

With Avatars

Chat bubbles with user avatars.

</>

Hey! Did you see the new updates?

Yes! They look amazing!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          avatarAlt="User"
          message="Hey! Did you see the new updates?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          avatarAlt="Me"
          message="Yes! They look amazing!"
        />
      </div>
    )
}

export default App

With Headers

Chat bubbles with name and timestamp headers.

</>

Alice 12:45

Good morning! Ready for the meeting?

Bob 12:46

Yes, joining now!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          header={<span>Alice <time className="text-xs opacity-50">12:45</time></span>}
          message="Good morning! Ready for the meeting?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          header={<span>Bob <time className="text-xs opacity-50">12:46</time></span>}
          message="Yes, joining now!"
        />
      </div>
    )
}

export default App

Colored Bubbles

Chat bubbles with different color variants.

</>

Primary color message

Secondary color message

Success color message

Error color message

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" color="primary" message="Primary color message" />
        <Chat position="end" color="secondary" message="Secondary color message" />
        <Chat position="start" color="success" message="Success color message" />
        <Chat position="end" color="error" message="Error color message" />
      </div>
    )
}

export default App

With Footer

Chat bubbles with delivery status footer.

</>

Did you get my message?

Delivered

Hello?

Seen at 12:46

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="end"
          avatar="/avatar-1.webp"
          footer={<span className="text-xs opacity-50">Delivered</span>}
          message="Did you get my message?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          footer={<span className="text-xs opacity-50">Seen at 12:46</span>}
          message="Hello?"
        />
      </div>
    )
}

export default App

API

Chat

Property	Description	Type	Default
message	Message content	React.ReactNode	-
position	Bubble position	'start' | 'end'	'start'
avatar	Avatar image URL	string	-
avatarAlt	Avatar alt text	string	-
header	Header content (name, time)	React.ReactNode	-
footer	Footer content (status)	React.ReactNode	-
color	Bubble color variant	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Use meaningful alt text for avatar images
• Message content is readable by screen readers
• Position classes help convey conversation flow