Back to Library
SaaS Dashboard

User Settings Page

Comprehensive settings page with profile, account, notifications, security, and billing sections.

Compatible with:

cursorv0claude
Create a user settings page with tabbed navigation:

LAYOUT:
- Sidebar navigation (tabs) on left
- Content area on right
- Tabs: Profile, Account, Notifications, Security, Billing

PROFILE TAB:
- Avatar upload (with preview)
- Full name
- Email (read-only or editable)
- Bio/Description (textarea)
- Phone number
- Location
- Website
- Social media links
- "Save Changes" button

ACCOUNT TAB:
- Username
- Email preferences
- Language selector
- Timezone selector
- Date format preference
- "Delete Account" button (danger zone at bottom)

NOTIFICATIONS TAB:
- Email notifications (toggle switches):
  * Product updates
  * Newsletter
  * Account activity
  * Marketing emails
- Push notifications (if applicable)
- Notification frequency (dropdown)
- "Save Preferences" button

SECURITY TAB:
- Change password section:
  * Current password
  * New password
  * Confirm new password
  * Password strength indicator
- Two-factor authentication:
  * Enable/Disable toggle
  * Setup instructions
- Active sessions:
  * List of devices/locations
  * "Sign out" button for each
- "Sign out all devices" button

BILLING TAB:
- Current plan display
- "Upgrade Plan" button
- Payment method:
  * Card ending in ****
  * "Update Payment Method" button
- Billing history table:
  * Date, Description, Amount, Status
  * "Download Invoice" links
- Billing address

STYLING:
- Clean, organized layout
- Clear section separators
- Consistent form styling
- Danger zone styling for destructive actions (red)
- Success messages after saves
- Mobile responsive (tabs become dropdown on mobile)

How to Use

  1. 1Click the "Copy Prompt" button above
  2. 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
  3. 3Paste the prompt and let the AI generate your UI
  4. 4Customize the output to match your brand and content

💡 Tips

Add proper form validation. Implement confirmation modals for destructive actions. Show loading states during saves.

Related Prompts