Shadcn UI Settings Profile Block
SettingsProfile4 is a full-page profile editing experience with sidebar navigation. The page header includes breadcrumb navigation and a title section. A left sidebar contains navigation buttons for Personal Info, Contact, Social Links, and Preferences sections with icons.
The main content area displays the currently selected section in a bordered card. Each section has its own heading and form fields. The Personal Info section includes avatar upload, name, username, and bio. Contact has email, phone, location, and website with icon prefixes. Social Links handles Twitter, LinkedIn, and GitHub with URL prefixes. Preferences offers language and timezone selectors.
A sticky footer bar at the bottom of the page contains Cancel and Save buttons, always visible regardless of scroll position. The sidebar navigation highlights the active section with primary color styling. The layout uses a muted background to create depth between the navigation and content areas.
This block is ideal for dedicated profile settings pages in dashboards or account management flows. The sidebar navigation allows quick jumping between sections without scrolling.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
file-upload @diceui | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
select @shadcn | Registry |
separator @shadcn | Registry |
textarea @shadcn | Registry |