Settings Page

A comprehensive settings page pattern with organized sections, form inputs, toggle switches, theme selectors, and a danger zone. This pattern demonstrates how to structure a multi-section settings interface with proper grouping, accessible controls, and clear visual hierarchy.

General Settings

Profile information section with avatar, name, and email form inputs. The foundation of any settings page.

Profile Photo

JPG, PNG or GIF. Max 2MB.

|

Account Settings

Password management, two-factor authentication, and email preference controls for account security.

Change Password

Two-Factor Authentication

Add an extra layer of security to your account

Email Preferences

Marketing emails

Receive emails about new features and updates

Security alerts

Get notified about unusual account activity

Appearance

Theme selector, font size preference, and layout density options. Let users customize their visual experience.

Theme

Font Size

Layout Density

Notifications

Toggle switches for email, push, and SMS notifications grouped by delivery channel and content category.

Delivery Channels

Email notifications

Receive notifications via email

Push notifications

Receive push notifications in your browser

SMS notifications

Receive critical alerts via text message

Categories

Project updates

Changes to projects you follow

Mentions

When someone mentions you in a comment

Weekly digest

Summary of activity each week

New features

Announcements about product updates

Danger Zone

Destructive actions section with confirmation flow. Always isolate dangerous operations visually and require explicit confirmation.

Delete Account

Permanently delete your account and all associated data. This action cannot be undone.

Sidebar Navigation

Full settings page layout with a left sidebar for section navigation. Click items to switch the active section.

Settings

General

Manage your profile information and public details.

Code Example

Full settings page implementation with organized sections, form state management, and toggle controls.

settings-page.tsx
tsx
'use client';

import { useState } from 'react';

function SettingsPage() {
  const [name, setName] = useState('John Doe');
  const [email, setEmail] = useState('john@example.com');
  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system');
  const [twoFactor, setTwoFactor] = useState(false);
  const [emailNotifs, setEmailNotifs] = useState(true);
  const [pushNotifs, setPushNotifs] = useState(true);

  return (
    <div className="max-w-2xl mx-auto p-6 space-y-8">
      {/* General */}
      <section>
        <h2 className="text-lg font-semibold mb-4">General</h2>
        <div className="space-y-4">
          <Input label="Name" value={name} onChange={setName} />
          <Input label="Email" value={email} onChange={setEmail} />
          <Button>Save Changes</Button>
        </div>
      </section>

      {/* Appearance */}
      <section>
        <h2 className="text-lg font-semibold mb-4">Appearance</h2>
        <Select
          value={theme}
          options={['light', 'dark', 'system']}
          onChange={setTheme}
        />
      </section>

      {/* Security */}
      <section>
        <h2 className="text-lg font-semibold mb-4">Security</h2>
        <Switch
          checked={twoFactor}
          onChange={setTwoFactor}
          label="Two-factor authentication"
        />
      </section>

      {/* Notifications */}
      <section>
        <h2 className="text-lg font-semibold mb-4">Notifications</h2>
        <div className="space-y-3">
          <Switch
            checked={emailNotifs}
            onChange={setEmailNotifs}
            label="Email notifications"
          />
          <Switch
            checked={pushNotifs}
            onChange={setPushNotifs}
            label="Push notifications"
          />
        </div>
      </section>

      {/* Danger Zone */}
      <section className="border border-danger-500/20 rounded-lg p-4">
        <h2 className="text-lg font-semibold text-danger-400 mb-2">
          Danger Zone
        </h2>
        <p className="text-sm text-muted mb-4">
          Permanently delete your account and all data.
        </p>
        <Button variant="destructive">Delete Account</Button>
      </section>
    </div>
  );
}

Best Practices

Design and development guidelines for building effective settings pages.

Group related settings

Organize settings into logical sections with clear headers. Users should find what they need within 2 clicks.

Save state explicitly

Use explicit save buttons rather than auto-save for important settings. Show confirmation on success.

Confirm destructive actions

Always require confirmation for irreversible operations. Use typed confirmation for account deletion.

Use progressive disclosure

Show advanced settings only when needed. Keep the default view clean and focused on common settings.

Provide context

Add helper text below each setting to explain what it does and when the user might want to change it.

Accessible controls

Use proper form labels, ARIA attributes, and keyboard navigation. All toggles should have descriptive labels.

Related

Components commonly used when building settings pages.

InputSwitchSelectCardButton