Laravel Mail Message Component

Pro

An email-aware conversation UI built on the chat primitives — sender, recipient, subject, timestamp, collapsible bodies and attachment chips.

A Mail Message 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::mail-message>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

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

Usage

<x-aura::mail-timeline>
    <x-aura::mail-message
        direction="in"
        from="[email protected]"
        to="[email protected]"
        subject="Re: your quote"
        time="Mon 09:14"
        :collapsible="true"
    >
        {{ $email->body }}

        <x-slot:attachments>
            <x-aura::mail-attachment name="quote.pdf" :href="$email->attachmentUrl" />
        </x-slot:attachments>
    </x-aura::mail-message>

    <x-aura::mail-message direction="out" from="[email protected]" to="[email protected]" subject="Re: your quote" time="Mon 10:02">
        Thanks — attached the revised version.
    </x-aura::mail-message>
</x-aura::mail-timeline>

See the full API, props and live examples in the Mail Message documentation.

Overview

Where x-aura::chat-bubble models short chat messages, the Mail components model email-style threads: each message carries a sender and recipient, a subject line, a timestamp, an optionally collapsible long body, and file attachments. Use x-aura::mail-timeline as the vertical container and x-aura::mail-message for each message.

See more examples and every variant in the Mail Message documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

WCAG 2.1 AA-minded, keyboard and ARIA support.