Profile settings

Pro

Who you are in the app: your name, your email (shown, but changed through your sign-in provider, which the field says), your time zone for schedules and timestamps, and your theme. Save is enabled only when something changed, and says when it's saved.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/profile-settings

Brings in: button, input, locale, locked, select, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { ProfileSettings, type Profile } from "@/components/profile-settings"

export default function Example() {
  const [profile, setProfile] = React.useState<Profile>({ name: "Jonas", email: "jonas@acme.example", timeZone: "Europe/Berlin", theme: "system" })
  return (
    <ProfileSettings
      className="w-full max-w-lg"
      profile={profile}
      timeZones={["America/New_York", "Europe/London", "Europe/Berlin", "Asia/Kolkata"]}
      emailManagedBy="Acme’s sign-in provider"
      emailVerified
      onSave={async (next) => {
        await new Promise((r) => setTimeout(r, 500))
        setProfile(next)
      }}
    />
  )
}

<ProfileSettings>

Prop	Type	Default	Description
profilerequired	`Profile`	—	The saved profile; the form starts from it and Save enables once it differs.
timeZonesrequired	`string[]`	—	IANA time zones offered, e.g. "Europe/London".
emailManagedByrequired	`string`	—	Where the email is changed, e.g. "Your company’s Okta".
emailVerifiedrequired	`boolean`	—	Marks the email as verified.
onSaverequired	`(p: Profile) => void \| Promise<void>`	—	Called on save with the edited profile; "Saved" shows once it resolves.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under profileSettings in <LocaleProvider strings={{ … }}>; the table is exported as profileSettingsStrings.

Key	English
label	Profile
name	Name
email	Email
emailFrom	Your email comes from {provider}; change it there.
verified	Verified
notVerified	Not verified
timeZone	Time zone
timeZoneHint	Used for schedules and times you see.
theme	Theme
themeSystem	Match my system
themeLight	Light
themeDark	Dark
themeHighContrast	High contrast
saved	Saved
saving	Saving…
save	Save

Types

Profile: { name: string; email: string; timeZone: string; theme: "system" | "light" | "dark" | "hc" }