Profile Screen

A complete user profile screen with avatar, personal information, and settings.

Features

• Avatar upload with crop
• Editable profile fields
• Social links
• Activity feed
• Statistics display
• Privacy settings
• Two-column responsive layout

Structure

• Header with cover photo and avatar
• Personal information card
• About section
• Activity/Posts feed
• Statistics (followers, posts, etc.)
• Action buttons (edit, share, follow)

Usage

Web (React)

import { Profile, ProfileHeader, ProfileInfo, ProfileActivity } from '@cuppa/ui'

function ProfileScreen() {
  const user = useUser()

  return (
    <Profile>
      <ProfileHeader
        coverImage="/cover.jpg"
        avatar="/avatar.jpg"
        name={user.name}
        username={user.username}
        bio={user.bio}
        stats={{
          followers: 1234,
          following: 567,
          posts: 89,
        }}
        actions={
          <>
            <Button onClick={handleEdit}>Edit Profile</Button>
            <Button variant="secondary" onClick={handleShare}>Share</Button>
          </>
        }
      />

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-1">
          <ProfileInfo
            email={user.email}
            location={user.location}
            website={user.website}
            joined={user.createdAt}
          />
        </div>

        <div className="md:col-span-2">
          <ProfileActivity posts={user.posts} />
        </div>
      </div>
    </Profile>
  )
}

iOS (SwiftUI)

import CuppaUI

struct ProfileView: View {
  @StateObject var viewModel: ProfileViewModel

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        CuppaProfileHeader(
          coverImage: viewModel.user.coverImage,
          avatar: viewModel.user.avatar,
          name: viewModel.user.name,
          username: viewModel.user.username,
          bio: viewModel.user.bio,
          stats: viewModel.user.stats,
          actions: {
            CuppaButton("Edit Profile") {
              viewModel.editProfile()
            }
            CuppaButton("Share", variant: .secondary) {
              viewModel.shareProfile()
            }
          }
        )

        HStack(alignment: .top, spacing: 20) {
          VStack {
            CuppaProfileInfo(user: viewModel.user)
          }
          .frame(maxWidth: .infinity)

          VStack {
            CuppaProfileActivity(posts: viewModel.user.posts)
          }
          .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.screens.CuppaProfile

@Composable
fun ProfileScreen(viewModel: ProfileViewModel) {
  val user by viewModel.user.collectAsState()

  CuppaProfile(
    user = user,
    onEdit = { viewModel.editProfile() },
    onShare = { viewModel.shareProfile() }
  ) {
    Row(
      modifier = Modifier.fillMaxWidth(),
      horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
      Column(modifier = Modifier.weight(1f)) {
        CuppaProfileInfo(user = user)
      }

      Column(modifier = Modifier.weight(2f)) {
        CuppaProfileActivity(posts = user.posts)
      }
    }
  }
}

Components Used

• Avatar
• Button
• Card
• Badge
• Tabs
• Input (for editing)
• Modal (for editing)

Variants

Public Profile

View-only profile for other users

Own Profile

Editable with additional options

Organization Profile

Extended information for business accounts

Best Practices

1. Show most important info above the fold
2. Use progressive disclosure for details
3. Provide clear edit affordances
4. Optimize images for fast loading
5. Handle privacy settings appropriately
6. Show appropriate actions based on relationship