Shadcn UI Settings Profile Block
SettingsProfile1 is a compact profile editing form inside a card container. The layout starts with an avatar display alongside an upload button for changing the profile photo. Below that, form fields are arranged in a responsive two-column grid for name and username, followed by full-width email and bio fields.
The card uses standard shadcn styling with a header containing title and description. Form fields use the Label component with proper htmlFor associations. The bio textarea includes helper text indicating character limits. Action buttons are right-aligned in the card footer with cancel and save options.
This block is suitable for settings pages, account dashboards, or modal dialogs where users need to update their basic profile information. The compact layout fits well in sidebars or narrow content areas.
The form maintains its structure on mobile with the two-column grid collapsing to single column on smaller screens.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
file-upload @diceui | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
textarea @shadcn | Registry |