Shadcn UI User Profile Block
UserProfile9 is a full-width profile dashboard layout. The main header card features a cover image banner with a large overlapping avatar. User details flow to the right including name, role with company, location, and join date. Follow and Message action buttons sit at the far right. Below the header sits a bio paragraph and social media icon links.
A stats grid displays four metric cards in a responsive row. Each card shows a label, large value, and percentage change from the previous period. Positive changes display in green with an up arrow, negative in red with a down arrow. Icons in the card headers provide visual context for each metric type.
The layout uses a comfortable max-width suitable for main content areas. The cover image spans the full card width while the avatar uses negative margin to overlap. Stats cards use the shadcn Card component with CardHeader and CardContent for consistent structure.
This pattern works well for user dashboards, creator analytics pages, or any context where profile information combines with performance metrics. The wide layout fills available space while remaining readable.
On mobile the layout stacks vertically with the avatar and actions reflowing. Stats cards collapse to a 2-column then single-column grid.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |