Shadcn UI User Profile Block
UserProfile3 is a detailed profile card with a cover image banner at the top. A large circular avatar overlaps the cover and card body boundary. Action buttons for follow and message sit to the right of the avatar. Below comes the name, role with company, and a longer bio paragraph. Meta information shows location and join date with small icons. Social links display as a row of platform icons. A stats section shows followers, following, and contributions inline. The card ends with a skills section displaying technology badges.
Rounded card container with subtle border. The cover image spans the full width with a fixed height. The avatar has a thick card-colored border creating visual separation from the cover. Text flows in a natural reading order from name through bio to metadata. Borders separate the stats and skills sections. Badges use the secondary variant for a muted appearance.
This is a comprehensive profile layout suitable for professional networks, developer platforms, or community sites. The cover image and overlapping avatar create visual interest while the structured sections organize substantial user information. More elaborate than a simple card but still focused on display rather than editing.
On mobile the cover image reduces in height and the avatar scales down slightly. The stats wrap naturally and skills badges flow to multiple lines as needed.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
avatar @shadcn | Registry |
badge @shadcn | Registry |
button @shadcn | Registry |