Two-column profile editor with form on the left and live preview on the right showing how the profile will appear.

Example

Edit Profile

Update your profile information. Changes will be reflected in the preview.

Basic Information

Your public profile information

Profile Photo

JPG, PNG or GIF. Max 2MB.

Name

Username

Role / Title

Bio

Location

Links

Your website and social links

Website

Twitter

GitHub

Live Preview

Public view

@jordanchen

Senior Software Engineer

Seattle, WA

Full-stack developer building tools for the modern web. Open source enthusiast and occasional writer about software architecture.

This is how your profile appears to others

Config 3 provides a profile editor with live preview:

Left column: Two cards—Basic Information (avatar, name, username, role, bio, location) and Links (website, Twitter, LinkedIn, GitHub).
Right column: Sticky “Public view” preview that updates as the user types. Shows avatar, name, @username, role, location, bio, and social icon links.

Uses Button, Input, Textarea, Avatar, and Badge. Ideal when users need immediate feedback on how their profile will look to others.

import { SettingsProfile5 } from "@/components/ui/settings-profile-5";

<SettingsProfile5 />

Hook the form state to your profile API and use the same data to render the live preview and save endpoint.