Edit Organization Details on Web

The OrganizationDetailsEdit component provides a unified interface to edit your organization details.

React
Next.js
shadcn

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

pnpm add @auth0/universal-components-react

Running either command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Required props

Required props are fundamental to the component’s operation. OrganizationDetailsEdit has no required props—it automatically loads the current organization’s details from the My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action props

Action props handle user interactions and define what happens when users save or cancel changes. Use lifecycle hooks (onBefore, onAfter) to integrate with your application’s routing and analytics.

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: ComponentAction<OrganizationPrivate>Controls the save flow when users submit organization changes. Use onAfter to navigate away after successful save.Properties:

disabled—Disable the save button (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

Example:

// Navigate back after saving
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Add confirmation before saving
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Track analytics on save
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onBefore(data)—Runs before the cancel action. Return false to prevent cancellation (for example, to confirm discarding unsaved changes).
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

backButtonType: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }Configures the back button in the component header. Use this to navigate back to your organization overview or the previous page.Properties:

icon—Custom Lucide icon component (optional, defaults to ArrowLeft)
onClick—Click handler for navigation

Example:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

Customization props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, requireddetails.name—Organization internal name details.displayName—Organization display name details.color—Brand color (hex format) details.logoURL—Logo URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, description, back_button_text

form—Form fields

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—Button labels

save_button_text, cancel_button_text

notifications—API responses

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

Advanced customization

The OrganizationDetailsEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom organization editing workflows if you use shadcn.

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom organization editing interfaces.

Component	Description
`OrganizationForm`	Main form component with all fields
`ColorPickerField`	Brand color selection field
`LogoUploadField`	Logo URL input with preview

Available hooks

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

Hook	Description
`useOrganizationDetailsEdit`	Organization editing logic and API integration

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

npm install @auth0/universal-components-react

Running the npm or pnpm commands installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

export function OrganizationSettingsPage() {
  const router = useRouter();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => router.push("/organization"),
      }}
      backButton={{
        onClick: () => router.push("/organization"),
      }}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const router = useRouter();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

Props

Core props

Core props are fundamental to the component’s operation. OrganizationDetailsEdit has no required props—it automatically loads the current organization’s details from the My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action props

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: ComponentAction<OrganizationPrivate>Controls the save flow when users submit organization changes. Use onAfter to navigate away after successful save.Properties:

disabled—Disable the save button (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

Common Patterns:

// Navigate back after saving
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// Add confirmation before saving
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// Track analytics on save
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onBefore(data)—Runs before the cancel action. Return false to prevent cancellation (for example, to confirm discarding unsaved changes).
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => router.push("/organization"),
  }}
/>

icon—Custom Lucide icon component (optional, defaults to ArrowLeft)
onClick—Click handler for navigation

Example:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/organization"),
  }}
/>;

Customization props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, description, back_button_text

form—Form fields

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—Button labels

save_button_text, cancel_button_text

notifications—API responses

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

Advanced customization

The OrganizationDetailsEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom organization editing workflows.

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom organization editing interfaces.

Component	Description
`OrganizationForm`	Main form component with all fields
`ColorPickerField`	Brand color selection field
`LogoUploadField`	Logo URL input with preview

Available hooks

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

Hook	Description
`useOrganizationDetailsEdit`	Organization editing logic and API integration

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json

Running the shadcn command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Core props

Core props are fundamental to the component’s operation. OrganizationDetailsEdit has no required props—it automatically loads the current organization’s details from the My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action props

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: ComponentAction<OrganizationPrivate>Controls the save flow when users submit organization changes. Use onAfter to navigate away after successful save.Properties:

disabled—Disable the save button (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

Common Patterns:

// Navigate back after saving
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Add confirmation before saving
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Track analytics on save
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onBefore(data)—Runs before the cancel action. Return false to prevent cancellation (for example, to confirm discarding unsaved changes).
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

icon—Custom Lucide icon component (optional, defaults to ArrowLeft)
onClick—Click handler for navigation

Example:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

Customization props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, description, back_button_text

form—Form fields

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—Button labels

save_button_text, cancel_button_text

notifications—API responses

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

Advanced customization

The OrganizationDetailsEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom organization editing workflows if you use shadcn.

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom organization editing interfaces.

Component	Description
`OrganizationForm`	Main form component with all fields
`ColorPickerField`	Color picker for brand color selection
`LogoUploadField`	Logo upload and management field

Available hooks

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

Hook	Description
`useOrganizationDetailsEdit`	Organization data fetching and editing logic
`useOrganizationDetailsEditLogic`	Form state and action handlers

Web Components

iOS Components

Android Components

Edit Organization Details on Web

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Web Components

iOS Components

Android Components

Documentation Index

​Setup requirements

​Installation

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks