Shadcn UI User Profile Block
UserProfile6 is a profile card with tabbed content sections. The header displays the avatar, name, role with company, location, a short bio, and social media links. Below the header sits a tab bar with three sections: About for an extended biography, Experience for work history, and Projects for portfolio items.
The card uses a comfortable max-width suitable for profile pages or modal dialogs. The avatar sits left-aligned with the user details flowing to the right. Social links use ghost icon buttons for a clean appearance. The tabs component spans the full card width with left-aligned triggers.
Experience entries use a timeline-style layout with a left border and briefcase icons. Each entry shows title, company, time period, and description. Projects display in bordered cards with technology tags shown as small muted badges.
This pattern works well for professional networking sites, developer portfolios, or any context where users have substantial information to display across multiple categories. The tabbed interface keeps the initial view compact while allowing deep exploration.
On mobile the layout remains functional with the header stacking naturally and tabs scrolling horizontally if needed.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
tabs @shadcn | Registry |