Shadcn UI Settings Profile Block
SettingsProfile7 is a compact inline-edit profile card designed for minimal footprint. The card displays an avatar on the left with a small edit button overlay. On the right, profile fields are stacked vertically showing labels and current values.
Each field row reveals a pencil icon on hover. Clicking the icon transforms the text into an input field with check and X buttons for saving or canceling. The input supports Enter to save and Escape to cancel. Only one field can be edited at a time to keep the interface focused.
The layout uses dividers between fields for visual separation. Field labels are small and muted, with values displayed in medium weight. Empty fields show “Not set” in muted text. The entire card maintains a narrow max-width suitable for sidebars or dashboard widgets.
This block is ideal for dashboards or settings pages where users need quick access to edit basic profile info without opening a full form. The display-first approach shows current values clearly while making edits frictionless.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
file-upload @diceui | Registry |
input @shadcn | Registry |