User Profile

Open source

Account profile view with a gradient cover band, overlapping avatar, name/handle/role badge, bio, action buttons and a posts/followers/following stat row, above a two-column About details card and a recent-activity list.

Add to page builder

Responsive Dark mode RTL Localized SEO

resources/views/blocks/user-profile.blade.php Blade

@props([
    'name' => 'Avery Mitchell',
    'handle' => '@averym',
    'role' => 'Product Designer',
    'initials' => 'AM',
    'bio' => 'Designing calm, accessible product interfaces. Currently shaping the design-system at Acme Inc. — previously at two seed-stage startups. I write about craft, tokens, and shipping small.',
    'email' => 'you@example.com',
    'location' => 'Lisbon, Portugal',
    'company' => 'Acme Inc.',
    'joined' => 'March 2021',
    'stats' => null,
    'activity' => null,
])

@php
    $stats ??= [
        ['label' => __('Posts'), 'value' => '248'],
        ['label' => __('Followers'), 'value' => '12.4k'],
        ['label' => __('Following'), 'value' => '318'],
    ];

    $activity ??= [
        [
            'title' => 'Published a new case study',
            'description' => 'Rebuilding the checkout flow for a 2.1× conversion lift.',
            'time' => '2h ago',
            'datetime' => '2026-06-15T09:20',
        ],
        [
            'title' => 'Commented on a thread',
            'description' => 'Shared notes on token naming for multi-brand theming.',
            'time' => 'Yesterday',
            'datetime' => '2026-06-14T16:40',
        ],
        [
            'title' => 'Followed Acme Design',
            'description' => 'Started following the Acme Design publication.',
            'time' => '3 days ago',
            'datetime' => '2026-06-12T11:05',
        ],
        [
            'title' => 'Reached 12k followers',
            'description' => 'A new milestone — thanks for reading along.',
            'time' => '1 week ago',
            'datetime' => '2026-06-08T08:00',
        ],
    ];

    $details = [
        [
            'label' => __('Email'),
            'value' => $email,
            'path' => '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
        ],
        [
            'label' => __('Location'),
            'value' => $location,
            'path' => '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
        ],
        [
            'label' => __('Company'),
            'value' => $company,
            'path' => '<rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01"/>',
        ],
        [
            'label' => __('Joined'),
            'value' => $joined,
            'path' => '<path d="M8 2v4M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/>',
        ],
    ];
@endphp

<x-ui.section
    data-slot="user-profile"
    aria-labelledby="user-profile-01-heading"
    space="xl" {{ $attributes }}
>
    <h2 id="user-profile-01-heading" class="sr-only">{{ __('Profile of :name', ['name' => $name]) }}</h2>

    <x-ui.container gutter="sm">
        <x-ui.card class="overflow-hidden p-0">
            <div class="h-32 w-full bg-gradient-to-br from-primary/20 via-accent/20 to-secondary/20 sm:h-40" aria-hidden="true"></div>

            <div class="px-6 pb-6 sm:px-8 sm:pb-8">
                <div class="-mt-12 flex flex-col gap-6 sm:-mt-14 sm:flex-row sm:items-end sm:justify-between">
                    <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
                        <x-ui.avatar
                            size="xl"
                            :alt="$name"
                            :fallback="$initials"
                            class="size-24 text-2xl ring-4 ring-card"
                        />
                        <div class="flex flex-col gap-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <h3 class="text-2xl font-bold tracking-tight">{{ $name }}</h3>
                                <x-ui.badge variant="secondary">{{ __($role) }}</x-ui.badge>
                            </div>
                            <p class="text-sm text-muted-foreground">{{ $handle }}</p>
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center gap-2">
                        <x-ui.button variant="outline">
                            <svg class="me-2 size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
                            {{ __('Edit profile') }}
                        </x-ui.button>
                        <x-ui.button>
                            <svg class="me-2 size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
                            {{ __('Follow') }}
                        </x-ui.button>
                    </div>
                </div>

                @if ($bio)
                    <p class="mt-6 max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground">{{ $bio }}</p>
                @endif

                <x-ui.separator class="my-6" />

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    @foreach ($stats as $item)
                        <x-ui.stat :label="$item['label']" :value="$item['value']" />
                    @endforeach
                </div>
            </div>
        </x-ui.card>

        <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-5">
            <x-ui.card class="p-6 sm:p-8 lg:col-span-2">
                <h3 class="text-lg font-semibold tracking-tight">{{ __('About') }}</h3>
                <x-ui.separator class="my-4" />
                <div class="flex flex-col gap-6">
                    @foreach ($details as $detail)
                        <div class="flex items-start gap-4">
                            <span class="mt-0.5 text-muted-foreground" aria-hidden="true">
                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $detail['path'] !!}</svg>
                            </span>
                            <div class="min-w-0">
                                <span class="block text-sm font-medium uppercase tracking-wide text-muted-foreground">{{ $detail['label'] }}</span>
                                <span class="mt-0.5 block break-words text-sm text-foreground">{{ $detail['value'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </x-ui.card>

            <x-ui.card class="p-6 sm:p-8 lg:col-span-3">
                <h3 class="text-lg font-semibold tracking-tight">{{ __('Recent activity') }}</h3>
                <x-ui.separator class="my-4" />
                <ul role="list" class="flex flex-col gap-6">
                    @foreach ($activity as $event)
                        <li class="flex items-start gap-4">
                            <span class="mt-2 size-2 shrink-0 rounded-full bg-primary" aria-hidden="true"></span>
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-0.5">
                                    <p class="text-sm font-medium text-foreground">{{ __($event['title']) }}</p>
                                    <time datetime="{{ $event['datetime'] }}" class="shrink-0 text-sm text-muted-foreground">{{ __($event['time']) }}</time>
                                </div>
                                <p class="mt-0.5 text-pretty text-sm text-muted-foreground">{{ __($event['description']) }}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </x-ui.card>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/user-profile

Installs these dependencies automatically:

avatar badge button card container section separator stat

Registry contract

Install confidence

php artisan ui:add blocks/user-profile 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/user-profile.blade.php

Registry dependencies

avatar badge button card container section separator stat

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.

user-profile.md

# Brok UI block: User Profile (`user-profile`)

Account profile view with a gradient cover band, overlapping avatar, name/handle/role badge, bio, action buttons and a posts/followers/following stat row, above a two-column About details card and a recent-activity list.

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/user-profile
```

## Render it

```blade
<x-blocks.user-profile />
```

## Props

- `name` (string, default `Avery Mitchell`) — Profile owner's name.
- `handle` (string, default `@averym`) — Profile owner's handle.
- `role` (string, default `Product Designer`) — Profile owner's role or title.
- `initials` (string, default `AM`) — Avatar fallback initials.
- `bio` (string, default `Designing calm, accessible product interfaces. Currently shaping the design-system at Acme Inc. — previously at two seed-stage startups. I write about craft, tokens, and shipping small.`) — Bio paragraph shown under the identity.
- `email` (string, default `[email protected]`) — Profile owner's email shown in the About card.
- `location` (string, default `Lisbon, Portugal`) — Profile owner's location.
- `company` (string, default `Acme Inc.`) — Profile owner's company.
- `joined` (string, default `March 2021`) — Join date text.
- `stats` (mixed|null, default `null`) — Stat row entries ({label, value}); null falls back to sample data.
- `activity` (mixed|null, default `null`) — Recent activity entries with title, description and time; null falls back to sample data.

## Use when

- Building a user profile view with a cover band, avatar, bio, stat row and an about/activity layout.
- Presenting a social or account profile page rather than an editable settings form.

## Avoid when

- Needing editable settings fields rather than a read-only profile view; use settings-account or pages/settings-page instead.

## Rules

- Render the installed block with `<x-blocks.user-profile />` 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/user-profile
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/user-profile.json

Ask about User Profile 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

Building a user profile view with a cover band, avatar, bio, stat row and an about/activity layout.
Presenting a social or account profile page rather than an editable settings form.

Avoid when

Needing editable settings fields rather than a read-only profile view; use settings-account or pages/settings-page instead.

Anti-patterns

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

Anatomy: root user-profile

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.user-profile />

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.