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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/add-user-modal/add-user-modal.tsx

Props

Prop	Status	Type / Options	Default	Description
`onClose`	Required	`VoidFunction`	-	Called when the user dismisses the modal (cancel or backdrop)
`onSubmit`	Required	`(data: { name: string; email: string; role: string; }) => Promise<void>`	-	Async handler called with validated form values on submission
`open`	Required	`boolean`	-	Controls whether the dialog is visible
`roles`	Required	`RoleOption[]`	-	List of assignable roles rendered in the role select drop-down
`isSubmitting`	Optional	`boolean`	`false`	Disables the submit button and shows a loading label while the parent is saving

`ChangeConfirmationModal`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/change-confirmation-modal/change-confirmation-modal.tsx

Props

Prop	Status	Type / Options	Default	Description
`children`	Required	`React.ReactNode`	-	Body content — use to describe the change being confirmed
`onClose`	Required	`VoidFunction`	-	Called when the user cancels or dismisses the dialog
`onConfirm`	Required	`VoidFunction`	-	Called when the user clicks the confirm button
`open`	Required	`boolean`	-	Controls whether the dialog is visible
`title`	Required	`string`	-	Dialog header title
`confirmText`	Optional	`string`	`"Confirm"`	`Label` for the confirm button
`destructive`	Optional	`boolean`	`false`	When `true`, the confirm button uses the danger variant

`FeatureFlagsSettings`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/feature-flags/feature-flags-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`featureFlags`	Required	`Record<string, boolean>`	-	Current flag values keyed by flag name
`isEditingEnabled`	Required	`boolean`	-	Whether editing is permitted
`onSave`	Required	`(flags: Record<string, boolean>) => void`	-	Called with updated flags when saved
`className`	Optional	`string`	-	Additional CSS class
`isLoading`	Optional	`boolean`	`false`	Show loading state
`isSaving`	Optional	`boolean`	`false`	Show saving spinner on save button

`HeaderControlsSettings`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/header-controls/header-controls-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`onReset`	Required	`VoidFunction`	-	Reset all preferences to defaults
`onToggle`	Required	`(key: keyof HeaderPreferences, value: boolean) => void`	-	Called when a preference toggle changes
`preferences`	Required	`HeaderPreferences`	-	Current header preference values
`className`	Optional	`string`	-	Additional CSS class
`isLoading`	Optional	`boolean`	`false`	Show loading state

`ImportExportSettings`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/import-export/import-export-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`onExport`	Required	`VoidFunction`	-	Trigger configuration export
`onImport`	Required	`(data: SettingsExportData) => void`	-	Apply imported configuration
`className`	Optional	`string`	-	Additional CSS class
`isExporting`	Optional	`boolean`	`false`	Show export loading state
`isImporting`	Optional	`boolean`	`false`	Show import loading state
`onParseFile`	Optional	`((file: File) => Promise<SettingsExportData>)`	-	Custom file-parsing function

`ManageUserModal`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/manage-user-modal/manage-user-modal.tsx

Props

Prop	Status	Type / Options	Default	Description
`onClose`	Required	`VoidFunction`	-	Called when the dialog closes
`onSubmit`	Required	`(data: { id: string; name: string; email: string; role: string; }) => Promise<void>`	-	Save handler
`open`	Required	`boolean`	-	Controls dialog visibility
`permissionLabels`	Required	`Record<string, string>`	-	Display labels for permission keys
`rolePermissions`	Required	`Record<string, Record<string, PermLevel>>`	-	Permission levels per role
`roles`	Required	`RoleOption[]`	-	Available role options
`user`	Required	`SettingsUser`	-	The user being edited
`isSubmitting`	Optional	`boolean`	`false`	Show loading on submit button

`RBACControlSettings`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/rbac-control/rbac-control-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`canWrite`	Required	`boolean`	-	Whether the current user may edit access settings
`onCreateUser`	Required	`(data: { name: string; email: string; role: string; }) => Promise<void>`	-	Create a new user
`onDeleteUser`	Required	`(userId: string) => Promise<void>`	-	Delete a user
`onUpdateUser`	Required	`(data: { id: string; name: string; email: string; role: string; }) => Promise<void>`	-	Update an existing user's role
`permissionLabels`	Required	`Record<string, string>`	-	Display labels for permission keys
`rolePermissions`	Required	`Record<string, Record<string, PermLevel>>`	-	Permission levels per role
`roles`	Required	`RoleOption[]`	-	Available role options
`users`	Required	`SettingsUser[]`	-	List of current users
`className`	Optional	`string`	-	Additional CSS class
`isLoading`	Optional	`boolean`	`false`	Show loading state

`SettingsDashboard`

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

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/settings/settings-dashboard/settings-dashboard.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional CSS class
`dangerActions`	Optional	`ActionButtonProps[]`	-	Danger-zone action buttons (reset, delete)
`featureFlagsProps`	Optional	`FeatureFlagsSettingsProps`	-	Props forwarded to `FeatureFlagsSettings`
`headerControlsProps`	Optional	`HeaderControlsSettingsProps`	-	Props forwarded to `HeaderControlsSettings`
`importExportProps`	Optional	`ImportExportSettingsProps`	-	Props forwarded to `ImportExportSettings`
`rbacControlProps`	Optional	`RBACControlSettingsProps`	-	Props forwarded to `RBACControlSettings`
`showFeatureFlags`	Optional	`boolean`	`false`	Whether to show the feature-flags section

Show steps

On this page