Shadcn UI Settings Profile Block
SettingsProfile2 is a comprehensive profile editing form organized into distinct sections. The layout begins with an avatar section featuring a circular photo with an overlay camera button for uploads. Below that, content is divided by separators into Personal Information, Work, and Social Links sections.
The Personal Information section contains name and username fields in a grid, with the username input prefixed by an @ symbol. A bio textarea follows for longer descriptions. The Work section groups job title, company, and location fields. Social Links provides inputs for website, Twitter, LinkedIn, and GitHub with platform-specific prefixes and icons.
Each section has a subtle heading to establish hierarchy. Input groups use addon prefixes to show URL patterns clearly. Social platform icons from lucide-react provide visual context. Action buttons at the bottom allow users to cancel or save their changes.
This block works well for professional networking apps, developer portfolios, or any platform where users maintain detailed public profiles. The sectioned layout scales well on mobile with inputs stacking vertically.
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 |
separator @shadcn | Registry |
textarea @shadcn | Registry |