Settings Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Settings Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import SettingsPage from @/components/blocks/settings-page.

// app/(admin)/settings/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell>{children}</AdminShell>)
"use client"

import { SettingsPage } from "@/components/blocks/settings-page"

export default function SettingsRoute() {
  return (
    <SettingsPage
      onSave={async (section, values) => {
        const res = await fetch(`/api/settings/${section}`, { method: "PUT", body: JSON.stringify(values) })
        if (!res.ok) throw new Error("We could not save. Please try again.")
      }}
      onPreferenceChange={async (preference, value) => {
        await fetch("/api/settings/preferences", { method: "PATCH", body: JSON.stringify({ preference, value }) })
      }}
      onTwoFactorChange={async (enabled) => {
        await fetch("/api/security/2fa", { method: enabled ? "POST" : "DELETE" })
      }}
    />
  )
}

Props

• section
  "profil" | "cont" | "notificari" | "facturare" | "securitate" | "pericol"

  The open section, controlled; pair it with onSectionChange (a route per section).

• defaultSectiondefault "profil"
  "profil" | "cont" | "notificari" | "facturare" | "securitate" | "pericol"

  The section open on mount.

• onSectionChange
  (section: SettingsPageSection) => void

  Called when another section opens (after the unsaved changes question).

• sectionsdefault "all six"
  SettingsPageSection[]

  Which sections exist, in this order.

• profile
  SettingsProfile

  Emma Carter's profile: photo, name, title, bio, phone, language, time zone, date format (SETTINGS_PAGE_SAMPLE.profile).

• account
  SettingsAccount

  The email with its verified flag and the workspace name and address (SETTINGS_PAGE_SAMPLE.account).

• notifications
  SettingsNotificationPrefs

  Event by channel switches, quiet hours and the digest (SETTINGS_PAGE_SAMPLE.notifications).

• notificationEvents
  { id: string; label: string; description?: string }[]

  The rows of the notifications grid: Overdue invoice, Payment received, Deal won, Mention, Task assigned, Weekly report.

• channelsdefault "all three"
  ("email" | "push" | "sms")[]

  The notification columns.

• billing
  SettingsBilling

  Plan, renewal, seats, AI tokens, storage, the card, the company details and the invoices (SETTINGS_PAGE_SAMPLE.billing).

• plans
  SettingsPlan[]

  The plans offered by Change plan: Start, Pro, Business with the price per user (SETTINGS_PAGE_SAMPLE.plans).

• sessions
  SettingsSession[]

  Signed in devices: MacBook Pro (current), iPhone 14, Windows (SETTINGS_PAGE_SAMPLE.sessions).

• timeZones
  { value: string; label: string; suggested?: boolean; keywords?: string[] }[]

  The time zone picker's options, suggested ones first (SETTINGS_PAGE_SAMPLE.timeZones).

• takenSlugs
  string[]

  Workspace addresses already in use, for the default availability check.

• twoFactorEnabled
  boolean

  Two-step verification, controlled; pair it with onTwoFactorChange.

• defaultTwoFactorEnableddefault false
  boolean

  Two-step verification on at mount (On instead of Turn on).

• onTwoFactorChange
  (enabled: boolean) => (void | Promise<unknown>)

  Turns two-step verification on (after the code checks out) or off (after the confirmation). Default: a simulated request.

• twoFactorSecretdefault "JBSWY3DPEHPK3PXP"
  string

  The base32 key shown under the QR code, in groups of four, with a copy button.

• twoFactorUridefault "otpauth://totp/Acme%20CRM:ana.pop%40acme.com?secret=JBSWY3DPEHPK3PXP&issuer=Acme%20CRM"
  string

  The otpauth:// address the QR code encodes.

• backupCodes
  string[]

  The ten backup codes of the last step (generated with a fixed seed in the sample).

• verifyTwoFactorCode
  (code: string) => (boolean | Promise<boolean>)

  Checks the authenticator code. Default: 123456 passes.

• passwordChangedAt
  Date | number

  When the password last changed ("Last changed on Jun 12, 2026").

• loginAlertsdefault true
  boolean

  The starting state of Alerte la autentificare.

• verifyEmailCode
  (email: string, code: string) => (boolean | Promise<boolean>)

  Checks the code sent to the new email. Default: 123456 passes.

• checkWorkspaceAddress
  (slug: string) => (boolean | Promise<boolean>)

  Whether a workspace address is free; runs when the field loses focus and before a save. Default: takenSlugs after 600 ms.

• navdefault "sidebar"
  "sidebar" | "tabs"

  The section navigation from 768px: a left column or tabs on top.

• saveBarPositiondefault "sticky"
  "sticky" | "fixed"

  Where the save bar sits: at the bottom of the content column, or pinned to the window. Phones always pin it.

• saveShortcutdefault "mod+s"
  string

  Saves the open section while it has changes; "" turns the key off.

• confirmLeavedefault true
  boolean

  Asks before switching sections with unsaved changes.

• resendSecondsdefault 30
  number

  How long Retrimite codul waits in the email dialog.

• defaultDialogdefault "none"
  "none" | "email" | "password" | "two-factor" | "plan" | "cancel-plan" | "delete"

  Opens with this dialog on desktop; the section that owns it has to be the one open (email in cont, password and two-factor in securitate, plan and cancel-plan in facturare, delete in pericol).

• defaultProfileDraft
  Partial<SettingsProfileDraft>

  Edits applied to the profile form on mount, so it opens with unsaved changes.

• onSave
  (section: SettingsFormSection, values: SettingsSaveValues[SettingsFormSection]) => (void | Promise<unknown>)

  Saves the open section's text fields from the save bar (profil, cont, notificari, facturare). A rejection keeps the draft and shows its message in the bar. Default: a simulated request.

• onPreferenceChange
  (preference: string, value: boolean) => (void | Promise<unknown>)

  Switches that save on their own: "notificari.matrix.<event>.<channel>", "notificari.matrix.*.<channel>", "notificari.quietHours", "securitate.loginAlerts". A rejection flips the switch back with a toast.

• onUpload
  (blob: Blob, context: { file; signal; onProgress }) => Promise<string | void>

  Uploads the cropped photo; resolve the new url. Default: a pretend upload with progress that keeps the local preview.

• onEmailChange
  (email: string, currentPassword: string) => (void | Promise<unknown>)

  Runs after the code for the new address checks out.

• onPasswordChange
  (values: { currentPassword: string; newPassword: string }) => (void | Promise<unknown>)

  The password dialog's submit; a rejection shows its message in the dialog.

• onSessionRevoke
  (session: SettingsSession) => (void | Promise<unknown>)

  Signs a device out (once per device for Sign out all others).

• onExport
  () => (void | Promise<unknown>)

  Export your data. Default: a toast that counts up, then offers a JSON download.

• onDeleteAccount
  () => (void | Promise<unknown>)

  Runs after the typed confirmation.

• onPlanChange
  (planId: string | null) => (void | Promise<unknown>)

  A plan id switches (or resumes); null cancels at the end of the period.

• onDirtyChange
  (dirty: boolean) => void

  The open section has unsaved changes (hide a phone tab bar while true, one bar per edge).

• paymentMethodHrefdefault "/settings/billing/card"
  string

  Where Update on the card goes.

• labelsdefault "DEFAULT_SETTINGS_PAGE_LABELS"
  Partial<SettingsPageLabels>

  Every visible string, merged over the English DEFAULT_SETTINGS_PAGE_LABELS. Nested keys carry the composed items' strings (validation, avatarUpload, cropper, phoneInput, timePicker, select, addressInput, qrCode, table, list, usageMeter).

• localedefault "en-US"
  string

  Intl locale for numbers, money, dates and relative times.

• currencydefault "USD"
  string

  The currency of the plan prices and the invoices.

• now
  Date | number

  The reference time for the sessions and the date format sample; default the live clock.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accent of the section navigation, the switches, the primary buttons and the save button.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Corner size of the settings groups (12 / 16 / 24px).

• loadingdefault false
  boolean

  The open section as skeleton rows in the real layout.

• animateIndefault true
  boolean

  The page rises in once when it mounts on the client; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the card and invoice links; default the surrounding LinkProvider's (the admin shell's).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"layout" | "section" | "saveBar", string>>

  Classes for the settings layout, every settings group and the save bar.

• failNextSavedefault false
  boolean

  The built-in pretend save (no onSave) fails once, so the error in the bar and the kept draft can be seen and tested.

Parts

FAQ

More React blocks