A user profile display component combining an avatar, name, and subtitle with inline, stacked, and card variants.
The default horizontal layout — ideal for sidebars, navigation bars, and user list items.
Jane Doe
jane@example.com
John Smith
Lead Engineer
Alice Wong
Product Designer
<x-ui::profile name="Jane Doe" subtitle="jane@example.com" />
<x-ui::profile name="John Smith" subtitle="Lead Engineer" />
<x-ui::profile name="Alice Wong" subtitle="Product Designer" />Vertical centered layout — great for profile headers, team cards, and settings pages.
Jane Doe
Designer
Jane Doe
Designer
Jane Doe
Designer
Jane Doe
Designer
<x-ui::profile
variant="stacked"
size="lg"
name="Jane Doe"
subtitle="Product Designer"
/>Wraps the inline layout in a bordered card — useful in grids, tables, and panel layouts.
Jane Doe
jane@example.com
John Smith
Lead Engineer
<x-ui::profile
variant="card"
name="Jane Doe"
subtitle="Product Designer"
/>Four sizes scale the avatar and typography together: sm, md (default), lg, and xl.
Jane Doe
Designer
Jane Doe
Designer
Jane Doe
Designer
Jane Doe
Designer
<x-ui::profile size="sm" name="Jane Doe" subtitle="Designer" />
<x-ui::profile size="md" name="Jane Doe" subtitle="Designer" />
<x-ui::profile size="lg" name="Jane Doe" subtitle="Designer" />
<x-ui::profile size="xl" name="Jane Doe" subtitle="Designer" />Use shape="square" for a rounded-square avatar instead of the default circle.
Jane Doe
Product Designer
Jane Doe
Product Designer
{{-- Circle (default) --}}
<x-ui::profile shape="circle" name="Jane Doe" subtitle="Product Designer" />
{{-- Square --}}
<x-ui::profile shape="square" name="Jane Doe" subtitle="Product Designer" />Pass status="online" for a green dot, or any other value for a gray dot indicating an inactive state.
Jane Doe
Active now
John Smith
Last seen 2h ago
{{-- Online --}}
<x-ui::profile status="online" name="Jane Doe" subtitle="Active now" />
{{-- Offline --}}
<x-ui::profile status="offline" name="John Smith" subtitle="Last seen 2h ago" />The default slot renders as trailing content — perfect for a chevron, badge, or action button.
Jane Doe
jane@example.com
John Smith
Lead Engineer
Alice Wong
Product Designer
{{-- With chevron (sidebar nav trigger) --}}
<x-ui::profile name="Jane Doe" subtitle="jane@example.com" status="online">
<x-ui::icon name="chevron-up-down" size="sm" class="text-zinc-400" />
</x-ui::profile>
{{-- With badge --}}
<x-ui::profile name="John Smith" subtitle="Lead Engineer">
<x-ui::badge color="lime" size="sm">Pro</x-ui::badge>
</x-ui::profile>
{{-- In a card with slot --}}
<x-ui::profile variant="card" name="Alice Wong" subtitle="Product Designer" status="online">
<x-ui::icon name="ellipsis-horizontal" size="sm" class="text-zinc-400" />
</x-ui::profile>Pass an href to render the profile as an anchor tag with a subtle hover opacity effect.
{{-- Inline link --}}
<x-ui::profile href="/profile" name="Jane Doe" subtitle="jane@example.com" />
{{-- Card link --}}
<x-ui::profile variant="card" href="/team/john" name="John Smith" subtitle="Lead Engineer" />
{{-- Stacked link --}}
<x-ui::profile variant="stacked" href="/profile" size="lg" name="Alice Wong" subtitle="Designer" />