Chat Showcase

Open source

Chat showcase sections — an iMessage-style conversation framed in a phone mockup beside marketing copy.

resources/views/blocks/chat-showcase-iphone.blade.php Blade

@props([
    'eyebrow' => 'Conversations',
    'heading' => 'Chat that feels like home',
    'subheading' => 'Real-time messaging with read receipts, typing indicators, and rich previews — wrapped in an interface your customers already know how to use.',
    'features' => null,
    'contact' => 'Maya Chen',
    'messages' => null,
])

@php
    $features ??= [
        'Delivered & read receipts out of the box',
        'Typing indicators and presence',
        'End-to-end encrypted by default',
    ];

    $messages ??= [
        ['role' => 'other', 'name' => 'Maya Chen', 'content' => 'Hey! Did the new design tokens land yet?', 'time' => '9:41'],
        ['role' => 'user', 'name' => 'You', 'content' => 'Just shipped them — dark mode included.', 'time' => '9:41'],
        ['role' => 'other', 'name' => 'Maya Chen', 'content' => 'Amazing. The contrast looks so much better now.', 'time' => '9:42'],
        ['role' => 'user', 'name' => 'You', 'content' => 'And it mirrors cleanly under RTL too.', 'time' => '9:42'],
        ['role' => 'other', 'name' => 'Maya Chen', 'content' => 'Perfect. Shipping the release notes 🎉', 'time' => '9:43'],
    ];

    // Initials for the chat header avatar fallback.
    $contactInitials = collect(preg_split('/\s+/', trim((string) $contact)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
        ->implode('');
@endphp

<x-ui.section
    data-slot="iphone-chat"
    space="xl" {{ $attributes }}
>
    {{-- CSS-only staggered reveal; fully visible when motion is reduced or unsupported. --}}
    <style>
        @media (prefers-reduced-motion: no-preference) {
            @keyframes chat-rise {
                from { opacity: 0; transform: translateY(8px); }
                to { opacity: 1; transform: translateY(0); }
            }
            [data-slot="iphone-chat"] .msg {
                animation: chat-rise 360ms ease-out both;
                animation-delay: calc(var(--i, 0) * 140ms);
            }
            @keyframes chat-typing {
                0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
                30% { opacity: 1; transform: translateY(-2px); }
            }
            [data-slot="iphone-chat"] .typing-dot {
                animation: chat-typing 1.2s ease-in-out infinite;
            }
            [data-slot="iphone-chat"] .typing-dot:nth-child(2) { animation-delay: 0.2s; }
            [data-slot="iphone-chat"] .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        }
    </style>

    <div class="mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-4 lg:grid-cols-2 lg:gap-16">
        {{-- Start column: copy + feature list --}}
        <div class="max-w-xl">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 class="mt-4 text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
            @endif

            @if (! empty($features))
                <x-ui.check-list marker="chip" class="mt-8 text-pretty">
                    @foreach ($features as $feature)
                        <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                    @endforeach
                </x-ui.check-list>
            @endif

            <div class="mt-8 flex flex-wrap items-center gap-4">
                <x-ui.button href="#">{{ __('Get the app') }}</x-ui.button>
                <x-ui.button variant="outline" href="#">{{ __('See how it works') }}</x-ui.button>
            </div>
        </div>

        {{-- End column: phone + conversation --}}
        <div class="flex justify-center lg:justify-end">
            <x-ui.iphone-mockup :label="__('Chat conversation preview')">
                <div class="flex size-full flex-col bg-background">
                    {{-- iMessage-style chat header --}}
                    <header class="flex flex-col items-center gap-2 border-b border-border px-4 pb-4 pt-2">
                        <x-ui.avatar size="lg" :alt="__($contact)" :fallback="$contactInitials" />
                        <p class="text-sm font-semibold text-foreground">{{ __($contact) }}</p>
                        <p class="flex items-center gap-2 text-sm text-muted-foreground">
                            <span class="size-2 rounded-full bg-success" aria-hidden="true"></span>
                            {{ __('Online') }}
                        </p>
                    </header>

                    {{-- Message list --}}
                    <div
                        role="log"
                        aria-label="{{ __('Chat messages') }}"
                        class="flex flex-1 flex-col gap-4 overflow-hidden px-4 py-4"
                    >
                        @foreach ($messages as $message)
                            <div class="msg flex flex-col" style="--i: {{ $loop->index }}">
                                <x-ui.chat-bubble
                                    :role="$message['role'] ?? 'user'"
                                    :name="$message['name'] ?? null"
                                >{{ $message['content'] ?? '' }}</x-ui.chat-bubble>

                                @if (! empty($message['time']))
                                    <span class="mt-2 px-2 text-sm text-muted-foreground {{ ($message['role'] ?? 'user') === 'user' ? 'self-end' : 'self-start' }}">
                                        {{ __($message['time']) }}
                                    </span>
                                @endif
                            </div>
                        @endforeach

                        {{-- Trailing typing indicator --}}
                        <div class="msg flex" style="--i: {{ count($messages) }}" aria-hidden="true">
                            <div class="flex items-center gap-2 rounded-lg rounded-es-sm bg-muted px-6 py-6">
                                <span class="typing-dot size-2 rounded-full bg-muted-foreground"></span>
                                <span class="typing-dot size-2 rounded-full bg-muted-foreground"></span>
                                <span class="typing-dot size-2 rounded-full bg-muted-foreground"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </x-ui.iphone-mockup>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/chat-showcase-iphone

Installs these dependencies automatically:

avatar button chat-bubble check-list iphone-mockup section

Registry contract

Install confidence

php artisan ui:add blocks/chat-showcase-iphone writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/chat-showcase-iphone.blade.php

Registry dependencies

avatar button chat-bubble check-list iphone-mockup section

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

chat-showcase-iphone.md

# Brok UI block: iPhone Chat (`chat-showcase-iphone`)

A two-column marketing showcase: eyebrow, heading, supporting copy and a check-icon feature list on one side, and an iMessage-style conversation framed in an iPhone mockup on the other, with CSS-only staggered message reveal and a trailing typing indicator.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/chat-showcase-iphone
```

## Render it

```blade
<x-blocks.chat-showcase-iphone />
```

## Props

- `eyebrow` (string, default `Conversations`) — Small uppercase label above the heading.
- `heading` (string, default `Chat that feels like home`) — Primary section heading.
- `subheading` (string, default `Real-time messaging with read receipts, typing indicators, and rich previews — wrapped in an interface your customers already know how to use.`) — Supporting paragraph under the heading.
- `features` (mixed|null, default `null`) — Array of checklist strings; falls back to a 3-item sample feature list when null.
- `contact` (string, default `Maya Chen`) — Name shown in the chat header and used to derive the avatar initials.
- `messages` (mixed|null, default `null`) — Array of {role, name, content, time} chat bubbles; falls back to a 5-message sample conversation when null.

## Use when

- Use it for a two-column marketing showcase that pairs a feature checklist and copy with a realistic iMessage-style conversation framed inside an iPhone mockup.
- Reach for it when messaging, chat, or notifications are the product's core value and a device frame with a staggered message reveal sells that story visually.

## Avoid when

- Avoid it when the product isn't chat/messaging-centric or a phone mockup isn't appropriate; use image-text-row for a generic image-and-copy row instead.

## Rules

- Render the installed block with `<x-blocks.chat-showcase-iphone />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/chat-showcase-iphone
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/chat-showcase-iphone.json

Ask about iPhone Chat in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Use it for a two-column marketing showcase that pairs a feature checklist and copy with a realistic iMessage-style conversation framed inside an iPhone mockup.
Reach for it when messaging, chat, or notifications are the product's core value and a device frame with a staggered message reveal sells that story visually.

Avoid when

Avoid it when the product isn't chat/messaging-centric or a phone mockup isn't appropriate; use image-text-row for a generic image-and-copy row instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: copy column with eyebrow, heading, subheading, and check-list get-the-app and learn-more buttons iPhone mockup frame chat header with avatar and online status message log trailing typing indicator

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.chat-showcase-iphone />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.