Pro Components
Base Components
Config 1
Compact profile card with inline editing—click a field to edit, save with Enter or the check button.
Example
AM
File upload
Name
Alex Morgan
Role
Product Designer
alex.morgan@email.com
Location
San Francisco, CA
Introduction
Config 1 is a compact inline-edit profile card:- Avatar on the left with a small edit overlay for photo.
- Fields (Name, Username, Email, Bio) stacked with labels and current values. Empty values show “Not set.”
- Inline edit: Hover to show a pencil icon; click to turn the value into an input. Use the check button or Enter to save, X or Escape to cancel. Only one field is editable at a time.
Usage
import { SettingsProfile7 } from "@/components/ui/settings-profile-7";
<SettingsProfile7 />