Shadcn UI Settings Profile Block
SettingsProfile3 is a multi-card profile settings layout featuring a prominent cover image section. The first card displays a cover photo with overlay controls for changing or removing the image. The avatar overlaps the cover photo edge with a bordered circular frame and upload button.
Below the cover card, a Basic Information card contains display name, pronouns selector, and an about textarea with markdown hint. A separate Preferences card handles regional settings with language and timezone dropdowns using the Select component.
The cover image section uses a dark overlay for better button visibility. The avatar has a thick border matching the card background for clean visual separation. Cards are stacked with consistent spacing. Action buttons sit outside the cards at the bottom for a unified save action.
This layout suits social platforms, community apps, or any product where visual profile customization matters. The multi-card approach allows for future expansion with additional settings sections. Mobile layout adjusts the cover height and centers the avatar section.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
file-upload @diceui | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
select @shadcn | Registry |
textarea @shadcn | Registry |