Full-page profile editor with sidebar navigation (Personal Info, Contact, Social, Preferences) and sticky save bar.

Example

SettingsEdit Profile

Edit Profile

Manage your personal information and preferences

Update your photo and personal details

or drag and drop

PNG, JPG or GIF (max. 2MB)

Full name

Username

Bio

Brief description for your profile

Config 4 is a full-page profile editing layout:

Header: Breadcrumb (Home / Profile) and “Profile settings” title.
Sidebar: Sections—Personal Info, Contact, Social Links, Preferences—with icons. Active section is highlighted.
Main content: The selected section in a card. Personal Info (avatar, name, username, bio), Contact (email, phone, location, website), Social (Twitter, LinkedIn, GitHub), Preferences (language, timezone selects).
Sticky footer: Cancel and Save buttons.

Uses Button, Input, Textarea, Avatar, and Native Select. Suited to dedicated account or profile settings pages.

import { SettingsProfile4 } from "@/components/ui/settings-profile-4";

<SettingsProfile4 />;

Wire each section to your profile data and add save/cancel handlers in the footer.