Settings Form with Grouped Sections

An account settings form with clearly grouped sections for profile, notifications, privacy, and danger zone.

Forms & Inputs forms-inputs settings shadcn dark-mode intermediate

Prompt

Create an account settings form page with these sections:

Profile section: Avatar with change button, Display name input, Email input with verified badge, Bio textarea, Website URL

Notifications section: Toggle switches for Email notifications, Push notifications, Weekly digest, Marketing emails

Privacy section: Radio group for profile visibility (Public/Friends/Private), Checkbox for showing online status

Danger Zone section: Red-bordered card with "Delete Account" button that opens a confirmation dialog requiring the user to type their username

- "Save Changes" button fixed at the bottom with unsaved changes indicator
- Use shadcn/ui, Tailwind CSS, dark mode support

Share:Share on X