Laravel Chat Bubble Component

Pro

Chat message bubble for building conversation interfaces with avatars and delivery status.

A Chat Bubble built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::chat-bubble>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Chat Bubble is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<div class="space-y-4">
    <x-aura::chat-bubble position="left" name="Alice" time="10:32 AM">
        Hey, how's the project going?
    </x-aura::chat-bubble>
    <x-aura::chat-bubble position="right" name="You" time="10:33 AM">
        Almost done! Just finishing up the last feature.
    </x-aura::chat-bubble>
</div>

See the full API, props and live examples in the Chat Bubble documentation.

Props

Prop	Type	Default	Description
`position`	`string`	`'left'`	Bubble alignment: `left` or `right`.
`color`	`string`	`'default'`	Bubble color theme: `default`, `primary`, `success`.
`avatar`	`string\|null`	`null`	URL to an avatar image displayed beside the bubble.
`name`	`string\|null`	`null`	Sender name shown above the message.
`time`	`string\|null`	`null`	Timestamp displayed below the message.
`status`	`string\|null`	`null`	Delivery status indicator: `sent`, `delivered`, `read`.