User Profile

Social

Block

Display user information with avatar, bio, stats, and actions in various layouts.

Preview

Full user profile card with all features

Sarah Chen

Pro

Verified

Senior Product Designer

Passionate about creating intuitive user experiences. Currently designing the future of collaboration tools at Acme Inc.

San Francisco, CAsarah.chen@example.com sarahchen.designJoined March 2021

2.4kfollowers

180following

32projects

Simple Profile

Basic profile without extra features

John Doe

Software Engineer

Building great software one commit at a time.

New York, NY

With Custom Actions

Profile with custom action buttons

Emily Watson

Marketing Manager

Helping brands tell their stories.

45campaigns

1.2Mreach

Compact Profile

Smaller profile for lists and sidebars

Taylor Brown

Backend Developer · Offline

Avatar Group

Display multiple users in a stacked layout

Small:

Medium:

Large:

UserProfile Props

UserProfile API reference

Prop	Type	Default	Description
`name*`	`string`	—	User display name
`avatar`	`string`	—	Avatar image URL
`title`	`string`	—	Job title or role
`bio`	`string`	—	Short biography
`location`	`string`	—	Location text
`email`	`string`	—	Email address
`website`	`string`	—	Website URL
`joinDate`	`string`	—	Join date text
`stats`	`Array<{label, value}>`	—	Profile statistics
`badges`	`Array<{label, variant}>`	—	User badges
`actions`	`ReactNode`	—	Custom action buttons
`onEdit`	`() => void`	—	Edit button callback
`onMore`	`() => void`	—	More button callback

CompactUserProfile Props

CompactUserProfile API reference

Prop	Type	Default	Description
`name*`	`string`	—	User display name
`avatar`	`string`	—	Avatar image URL
`title`	`string`	—	Primary subtitle
`subtitle`	`string`	—	Secondary subtitle
`badge`	`{label, variant}`	—	User badge
`actions`	`ReactNode`	—	Action buttons
`onClick`	`() => void`	—	Click handler

UserAvatarGroup Props

UserAvatarGroup API reference

Prop	Type	Default	Description
`users*`	`Array<{name, avatar}>`	—	Array of users
`max`	`number`	`5`	Maximum avatars to show
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Avatar size

Usage

Import and implementation examples

import { UserProfile, CompactUserProfile, UserAvatarGroup } from '@/blocks/data-display/user-profile'

// Full profile
<UserProfile
 name="Jane Doe"
 title="Product Manager"
 bio="Building products that matter."
 location="Seattle, WA"
 stats={[
 { label: 'projects', value: 24 },
 { label: 'reviews', value: '4.9' },
 ]}
 badges={[{ label: 'Verified', variant: 'success' }]}
 onEdit={() => openEditModal()}
/>

// Compact profile for lists
<CompactUserProfile
 name="John Smith"
 title="Designer"
 subtitle="Online"
 badge={{ label: 'Pro', variant: 'primary' }}
 onClick={() => navigateToProfile()}
/>

// Avatar group
<UserAvatarGroup
 users={[
    { name: 'User 1', avatar: '/avatars/1.jpg' },
    { name: 'User 2', avatar: '/avatars/2.jpg' },
 ]}
 max={5}
 size="md"
/>

Built With

3 components

This block uses the following UI components from the design system:

Avatar Badge Button

Features

Built-in functionality

Avatar with fallback: Shows initials when no image provided
Profile badges: Display verification, role, or status badges
User statistics: Show follower counts, projects, etc.
Contact links: Email, website, and location display
Compact variant: Smaller layout for lists
Avatar groups: Stack multiple user avatars
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Avatar images have alt text with user nameEmail links use mailto: protocolExternal links have rel="noopener noreferrer"

Keyboard Navigation

Key	Action
`Tab`	Navigate between interactive elements
`Enter/Space`	Activate buttons and links

Notes

Initials provide visual fallback for avatars
Actions are clearly labeled
Contact info is actionable where appropriate

Related Components

Avatar Badge Card Team Card