Settings

Components for settings and configuration interfaces.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`AddUserModal`

Modal form for inviting a new user — captures email, role, and optional team assignment.

agent-ready

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	✓	-	-
`onClose`	`VoidFunction`	✓	-	-
`roles`	`RoleOption[]`	✓	-	-
`onSubmit`	`(data: { name: string; email: string; role: string; }) => Promise<void>`	✓	-	-
`isSubmitting`	`boolean \| undefined`		-	-

`ChangeConfirmationModal`

Generic confirmation modal that shows a diff or summary of pending changes before applying them.

agent-ready

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	✓	-	-
`title`	`string`	✓	-	-
`onConfirm`	`VoidFunction`	✓	-	-
`onClose`	`VoidFunction`	✓	-	-
`children`	`React.ReactNode`	✓	-	-
`confirmText`	`string \| undefined`		-	-
`destructive`	`boolean \| undefined`		-	-

`FeatureFlagsSettings`

Settings panel listing every feature flag with per-flag enable/disable toggle and description.

agent-ready

Props

Prop	Type	Required	Default	Description
`featureFlags`	`Record<string, boolean>`	✓	-	-
`isEditingEnabled`	`boolean`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`isSaving`	`boolean \| undefined`		-	-
`onSave`	`(flags: Record<string, boolean>) => void`	✓	-	-
`className`	`string \| undefined`		-	-

`HeaderControlsSettings`

Settings panel for the global app header — toggle controls, sticky behaviour, and theme defaults.

agent-ready

Props

Prop	Type	Required	Default	Description
`preferences`	`HeaderPreferences`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`onToggle`	`(key: keyof HeaderPreferences, value: boolean) => void`	✓	-	-
`onReset`	`VoidFunction`	✓	-	-
`className`	`string \| undefined`		-	-

`ImportExportSettings`

Settings panel for exporting site configuration as JSON and importing a previously saved snapshot.

agent-ready

Props

Prop	Type	Required	Default	Description
`onExport`	`VoidFunction`	✓	-	-
`onImport`	`(data: SettingsExportData) => void`	✓	-	-
`onParseFile`	`((file: File) => Promise<SettingsExportData>) \| undefined`		-	-
`isExporting`	`boolean \| undefined`		-	-
`isImporting`	`boolean \| undefined`		-	-
`className`	`string \| undefined`		-	-

`ManageUserModal`

Modal for editing an existing user's role, status, or team membership.

agent-ready

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	✓	-	-
`onClose`	`VoidFunction`	✓	-	-
`user`	`SettingsUser`	✓	-	-
`roles`	`RoleOption[]`	✓	-	-
`rolePermissions`	`Record<string, Record<string, PermLevel>>`	✓	-	-
`permissionLabels`	`Record<string, string>`	✓	-	-
`onSubmit`	`(data: { id: string; name: string; email: string; role: string; }) => Promise<void>`	✓	-	-
`isSubmitting`	`boolean \| undefined`		-	-

`RBACControlSettings`

Settings panel listing roles and their permissions; supports editing role-permission grants.

agent-ready

Props

Prop	Type	Required	Default	Description
`users`	`SettingsUser[]`	✓	-	-
`roles`	`RoleOption[]`	✓	-	-
`rolePermissions`	`Record<string, Record<string, PermLevel>>`	✓	-	-
`permissionLabels`	`Record<string, string>`	✓	-	-
`canWrite`	`boolean`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`onCreateUser`	`(data: { name: string; email: string; role: string; }) => Promise<void>`	✓	-	-
`onUpdateUser`	`(data: { id: string; name: string; email: string; role: string; }) => Promise<void>`	✓	-	-
`onDeleteUser`	`(userId: string) => Promise<void>`	✓	-	-
`className`	`string \| undefined`		-	-

`SettingsDashboard`

Top-level settings landing page — composes the per-section settings cards in a single grid.

agent-ready

Props

Prop	Type	Default	Description
`dangerActions`	`ActionButtonProps[] \| undefined`	-	-
`headerControlsProps`	`HeaderControlsSettingsProps \| undefined`	-	-
`rbacControlProps`	`RBACControlSettingsProps \| undefined`	-	-
`importExportProps`	`ImportExportSettingsProps \| undefined`	-	-
`featureFlagsProps`	`FeatureFlagsSettingsProps \| undefined`	-	-
`showFeatureFlags`	`boolean \| undefined`	-	-
`className`	`string \| undefined`	-	-

Show steps

On this page