Profile Header

Full profile header with cover image, avatar, stats, and action buttons.

Preview

Demo Creator

@democreator

Digital artist and content creator sharing my creative journey

San Francisco, CAexample.com

12,500

Followers

850

Following

342

Posts

Usage

import { ProfileHeader } from "@/components/profile"

<ProfileHeader
  name="Demo Creator"
  username="democreator"
  avatar="/avatar.jpg"
  coverImage="/cover.jpg"
  bio="Digital artist and content creator"
  location="Los Angeles, CA"
  website="https://example.com"
  stats={[
    { label: "Followers", value: 12500 },
    { label: "Following", value: 850 },
    { label: "Posts", value: 342 },
  ]}
  verified
  onAvatarClick={() => handleAvatarClick()}
/>

Minimal Version

Only the required props for a simple profile header.

Simple User

@simpleuser

<ProfileHeader
  name="Simple User"
  username="simpleuser"
  avatar="/avatar.jpg"
/>

With Cover Image

Explorer Demo

@explorer

Exploring the world one adventure at a time

45,000

Followers

1,200

Following

892

Posts

Props

Prop	Type	Default	Description
name	string	-	Display name
username	string	-	Username (without @ prefix - added automatically)
avatar	string	-	Avatar image URL
coverImage	string	-	Cover/banner image URL
bio	string	-	Profile bio text
location	string	-	Location text
website	string	-	Website URL
stats	{ label: string, value: string \| number }[]	-	Array of stat objects to display
verified	boolean	false	Show verification badge
onAvatarClick	() => void	-	Avatar click handler

Stats Array Format

// Stats is an array of label/value pairs
stats={[
  { label: "Followers", value: 12500 },
  { label: "Following", value: 850 },
  { label: "Posts", value: 342 },
]}

// You can add any custom stats
stats={[
  { label: "Subscribers", value: "1.2M" },
  { label: "Videos", value: 156 },
  { label: "Views", value: "50M+" },
]}