# Profile Header

Profile header with avatar, optional cover, verified name, bio, stats and action buttons. Once followed, a coloured ring draws around the avatar and stays, and stat counts roll to new numbers.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/profile-header
```

## Import

```tsx
import { ProfileHeader } from "@/components/ui/profile-header/profile-header";
```

## Variants

- `creator` — Social creator: `npx @lumioui/cli add pro/profile-header-creator`
- `minimal` — Minimal ink: `npx @lumioui/cli add pro/profile-header-minimal`
- `professional` — Professional: `npx @lumioui/cli add pro/profile-header-professional`
- `seller` — Seller: `npx @lumioui/cli add pro/profile-header-seller`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | — |
| `avatar?` | `ImageSourcePropType` | — |
| `fallback?` | `string` | Initials shown while the avatar is missing. |
| `handle?` | `string` | "@handle", a role line, or "Member since 2019". |
| `verified?` | `boolean` | — |
| `bio?` | `string` | — |
| `cover?` | `ImageSourcePropType` | Cover photo — the avatar overlaps its bottom edge. |
| `coverAlt?` | `string` | — |
| `mark?` | `React.ReactNode` | Small mark pinned to the avatar's corner (company logo, shop badge). |
| `meta?` | `ProfileHeaderMetaItem[]` | One line of facts under the handle, dot-separated. |
| `stats?` | `ProfileHeaderStat[]` | — |
| `statsLayout?` | `"columns" | "inline"` | `columns` — figures over labels in equal columns; `inline` — "1,240 sold · 58 listings". Default "columns". |
| `actions?` | `React.ReactNode` | Action row — compose Buttons here. |
| `align?` | `"start" | "center"` | Default "start". |
| `avatarSize?` | `keyof typeof AVATAR_PX` | Default "lg" (88pt). |
| `className?` | `string` | — |
| `coverClassName?` | `string` | — |
| `followed?` | `boolean` | The viewer follows this profile — the avatar wears a drawn accent ring  (drawn with a light pool when it turns on). |
| `switchOn?` | `boolean` | Mount dim and switch on band by band. Default true. |

Source: https://lumioui.com/components/profile-header