CMS settings

SettingsLayout

Sectioned settings page: vertical section nav + the active section’s content. Uncontrolled by default (first section active).

General settings…


import { SettingsLayout, SettingsForm } from '@gg-software/cms';
 
<SettingsLayout
    sections={[
        { key: 'general', label: 'General', content: <GeneralSettings /> },
        { key: 'billing', label: 'Billing', content: <BillingSettings /> },
    ]}
/>;

Prop	Type	Default	Description
`sections`*	`SettingsSection[]`	—
`activeKey`	`string`	—	controlled active section key
`onChange`	`((key: string) => void)`	—
`className`	`string`	—

* required · generated from packages/cms/src/settings/SettingsLayout.tsx

SettingsForm

A grouped settings panel driven by the field schema, with dirty-state tracking: Save enables only with unsaved changes, Reset restores the baseline, and a successful save becomes the new baseline. Try editing a field:

Site name

Support email

Maintenance mode


<SettingsForm
    title="General"
    fields={[
        { name: 'siteName', label: 'Site name', required: true },
        { name: 'supportEmail', label: 'Support email', type: 'email' },
        { name: 'maintenance', label: 'Maintenance mode', type: 'switch' },
    ]}
    initialValues={settings}
    onSubmit={(values) => api.saveSettings(values)}
/>

Prop	Type	Default	Description
`title`	`ReactNode`	—	panel title
`description`	`ReactNode`	—	muted text under the title
`fields`*	`FieldDef[]`	—	field schema (see FieldDef)
`initialValues`	`FormValues`	—	current settings values
`onSubmit`*	`(values: FormValues) => void \| Promise<void>`	—	save handler; may be async (button shows loading)
`submitLabel`	`string`	`Save changes`
`resettable`	`boolean`	`true`	show a Reset button that restores the initial values (default true)
`error`	`ReactNode`	—
`className`	`string`	—

* required · generated from packages/cms/src/settings/SettingsForm.tsx

ProfileForm

User profile editing: avatar (ImageUploader), name, email and an optional new-password section — validated for strength and match, included in the submitted values only when filled.


import { ProfileForm } from '@gg-software/cms';
 
<ProfileForm
    user={{ name: user.name, email: user.email, avatarUrl: user.avatarUrl }}
    onSubmit={async ({ name, email, password, avatar }) => {
        await api.updateProfile({ name, email, password });
        if (avatar) await api.uploadAvatar(avatar);
    }}
/>;

Prop	Type	Default	Description
`user`*	`{ name?: string \| undefined; email?: string \| undefined; avatarUrl?: string \| undefined; }`	—	current profile
`onSubmit`*	`(values: ProfileFormValues) => void \| Promise<void>`	—	save handler; may be async
`showAvatar`	`boolean`	`true`	show the avatar uploader (default true)
`showPasswordChange`	`boolean`	`true`	show the change-password section (default true)
`passwordRequirements`	`PasswordRequirements`	—	password strength rules (utils isStrongPassword)
`error`	`ReactNode`	—
`submitLabel`	`string`	`Save profile`
`className`	`string`	—

* required · generated from packages/cms/src/settings/ProfileForm.tsx