Shadcn UI User Profile Block
UserProfile2 is a horizontal profile layout with the avatar positioned to the left of the user details. The header row shows name, role with company affiliation, and a row of social media icons linking to Twitter, LinkedIn, GitHub, and a personal website. Below the header sits a bio paragraph. A stats row displays followers, following, and projects counts with formatted numbers. Two action buttons complete the layout.
No card wrapper or border on this block. The avatar and text align horizontally at the top. Social icons appear as small muted links that brighten on hover. The stats section uses top and bottom borders to create visual separation. Numbers use a helper function to format thousands as K and millions as M for compact display.
A developer-focused profile style commonly seen on coding platforms and portfolio sites. The horizontal avatar placement and social links give it a more professional feel than a centered card. Stats provide social proof without overwhelming the layout.
On smaller screens the layout remains horizontal but the text wraps naturally. The stats row maintains its inline arrangement.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |