Profile Header
A compound component for entity profile pages — user, facility, or any resource. Composes a cover image, avatar, title, ID badge, meta fields, and action slots.
* Use overlap on ProfileHeader.Avatar when paired with a Cover to straddle the boundary.
Import
Usage Examples
With cover + avatar overlap
John Doe
With cover image + avatar image
Jane Smith
Facility profile — cover + initials (no image)
Acme Corp Facility
Cover variant: mesh (no image — light/dark adaptive)
Adrián Coll
With cover — no back button, solid + initials
Michael Chen
With actions slot
Adrián Coll
API Reference
ProfileHeader
Root wrapper component.
children: React.ReactNode
ProfileHeader.Cover
Optional cover image area. Children are positioned absolutely inside.
src?: string | null — cover image URL
children?: React.ReactNode — e.g. BackButton
ProfileHeader.Avatar
Avatar slot. Shows initials if no image. Clicking opens lightbox.
src?: string | null — avatar image URL
name: string — name for initials fallback
overlap?: boolean — applies -mt-14 to straddle cover boundary
ProfileHeader.BackButton
Navigation button. Position absolute inside Cover.
onPress?: () => void
children: React.ReactNode — button label
ProfileHeader.InfoBar
Flex container for avatar, identity, metadata, and actions. Default: items-end gap-4 px-6 pb-6
children: React.ReactNode
className?: string — override flex classes (e.g. "items-start pt-6")
ProfileHeader.Identity
Flex wrapper for Title and IdBadge. Wraps to multiple lines.
children: React.ReactNode
ProfileHeader.Title
Large heading (text-xl font-semibold).
children: React.ReactNode
ProfileHeader.IdBadge
Monospace ID badge. Clickable to copy value.
children: string — ID to display and copy
ProfileHeader.MetaBar
Right-aligned metadata container (ml-auto). Contains MetaFields.
children: React.ReactNode
ProfileHeader.MetaField
Individual metadata field with icon. Clickable if copyValue provided.
icon: string — Iconify icon name (e.g. "lucide:mail")
children: React.ReactNode — displayed value
copyValue?: string — copy to clipboard on click
truncate?: boolean — max-w-[200px] + truncate
ProfileHeader.Actions
Right-aligned slot for buttons and menus (ml-auto). Inside InfoBar.
children: React.ReactNode