Camille Dubois

Freelance product designer

Identity verifiedProduct design

<ProfileHeader.Root
	name="Camille Dubois"
	headline="Senior product designer"
	theme="brand"
	avatar={{ src: user.avatarUrl, name: user.name }}
	badges={<Badge variant="brand">Identity verified</Badge>}
	actions={<Button size="sm">Contact</Button>}
/>

theme picks the accent — brand or highlight — which tints the gradient used when there is no cover image.

API

ProfileHeader.Root

Prop	Type	Default
`name`	`string`	required
`actions`	`ReactNode`	—
`avatar`	`ProfileHeaderAvatar \| ReactNode`	—
`badges`	`ReactNode`	—
`coverImage`	`ReactNode`	—
`headline`	`ReactNode`	—
`theme`	`ProfileTheme`	`"brand"`

Plus every <div> prop. Source: profile-header/components/profile-header-root.tsx.

ProfileHeader.Cover

Prop	Type	Default
`coverImage`	`ReactNode`	—
`theme`	`ProfileTheme`	`"brand"`

Plus every <div> prop. Source: profile-header/components/profile-header-cover.tsx.