Pro Components

Base Components

Config 5

Sectioned profile form with personal info, work details, and social links; avatar with upload button.

Example

Edit Profile
Manage your public profile information
AM

Profile Photo

Click the camera icon to upload a new photo.
Recommended: Square image, at least 400x400px.

File upload

Personal Information

@

Work

Social Links

x.com/
linkedin.com/in/
github.com/

Introduction

Config 5 is a comprehensive profile form:
  • Avatar at the top with a camera overlay button for upload.
  • Personal Information: Name, username (with @ prefix), and bio in a grid.
  • Work: Job title, company, location.
  • Social Links: Website, Twitter, LinkedIn, GitHub with platform icons.
  • Actions: Cancel and Save changes at the bottom.
Uses Button, Input, Textarea, and Avatar. Good for professional or portfolio profiles where users maintain detailed public info.

Usage

import { SettingsProfile2 } from "@/components/ui/settings-profile-2";

<SettingsProfile2 />
Connect the form to your profile API and add photo upload and validation as needed.

On this page