A social profile header with a drifting gradient cover, overlapping avatar, follow and message actions, stats that count up and tabs with a sliding underline.
@mayabuilds
Product designer building calm tools for busy teams. Previously design lead at Northwind. Writing about interfaces, type and the craft of shipping.
npx shadcn@latest add https://hyperblur.dev/r/profile-header-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-header-card.tsx.
import { ProfileHeaderCard } from "@/components/hyperblur/profile-header-card"
<ProfileHeaderCard name="Maya Okafor" handle="@mayabuilds" onFollowChange={(f) => console.log(f)} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Maya Okafor" | Display name. Also gives the avatar initials. |
| handle | string | "@mayabuilds" | Handle under the name. |
| verified | boolean | true | Show the verified badge. |
| bio | string | "Product designer building calm tools..." | Short bio. Hidden when empty. |
| location | string | "Lisbon, Portugal" | Location in the meta row. |
| website | { label: string; href: string } | { label: "maya.design", href: "https://maya.design" } | Website link in the meta row. |
| joined | string | "Joined March 2019" | Join date text in the meta row. |
| stats | { label: string; value: number }[] | Followers, Following, Appreciations | Numbers that count up on mount and render compact (48.2K). The first one gains one while following when uncontrolled. |
| tabs | { id: string; label: string; count?: number }[] | Posts, Work, Likes | Tab strip under the profile. |
| panels | Record<string, { title: string; meta: string; hue: number }[]> | 3 items per tab | Cards shown for each tab id. The hue tints the gradient thumbnail. |
| tab | string | Controlled active tab id. Pair with onTabChange. | |
| defaultTab | string | first tab | Initial tab when uncontrolled. |
| onTabChange | (id: string) => void | Called when a tab is chosen by click or arrow keys. | |
| following | boolean | Controlled follow state. Pair with onFollowChange. | |
| defaultFollowing | boolean | false | Initial follow state when uncontrolled. |
| onFollowChange | (following: boolean) => void | Called when the follow button toggles. | |
| onMessage | () => void | Called when the message button is clicked. | |
| accent | string | "#2f7bff" | Cover tint, follow button, badge and tab underline. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |