Profile Header Section
What is this?
A white profile header: a flat muted cover with an overlapping avatar, the name, handle, and a short bio, stats for Followers 2,481, Following 312, and Projects 27, and Message and Follow buttons. Follow turns into “Following” and the follower count rolls up by one; clicking again rolls it back. Under Overview, Projects, and Activity, the tab underline slides, the panel crossfades, and the card height follows. Swap the name, numbers, and tab content, then drop it into a community, a portfolio, or a team directory.
Profile Header Section
A white profile header: a flat muted cover with an overlapping avatar, the name, handle, and a short bio, stats for Followers 2,481, Following 312, and Projects 27, and Message and Follow buttons. Follow turns into “Following” and the follower count rolls up by one; clicking again rolls it back. Under Overview, Projects, and Activity, the tab underline slides, the panel crossfades, and the card height follows. Swap the name, numbers, and tab content, then drop it into a community, a portfolio, or a team directory.
Verified Technical Spec
- Animation
- Framer Motion
- Reduced motion
- Verified
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS · Motion · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
- Motion 12.42.2
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Motion
- Lucide
Version 1.0.0