> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Admin Portal Organization Settings

> Organization settings management in the Admin Portal Prebuilt UI Components

The `AdminPortalOrgSettings` is a drop-in component for the Organization settings page in your application. It allows Organization Members with the required RBAC roles (ie. `admin`) to manage settings for their Organization.

`AdminPortalOrgSettings` must be wrapped inside a `StytchB2BProvider`. Take a look at our [installation guide](../../installation) for more information on how to configure the `StytchB2BProvider` for your framework.

<img src="https://mintcdn.com/stytch-34ca0595/ZVUUFsqZuqcX7gxa/images/api-reference/b2b/frontend-sdks/admin-portal-organzation-settings.png?fit=max&auto=format&n=ZVUUFsqZuqcX7gxa&q=85&s=9f9a66d0560cf6b4a19d0ae4f9201e51" alt="Admin Portal Organization Settings UI" width="1552" height="1402" data-path="images/api-reference/b2b/frontend-sdks/admin-portal-organzation-settings.png" />

## Props

<ParamField path="styles" type="object">
  The style configuration allows you to customize the look of the Admin Portal. You can specify some of them or none at all. We'll use our defaults for the ones you don't specify.

  <Expandable title="properties">
    <ParamField path="container" type="object">
      The configuration object for the Admin Portal container.

      <Expandable title="properties">
        <ParamField path="backgroundColor" type="string">
          The background color of the Admin Portal container.
        </ParamField>

        <ParamField path="borderColor" type="string">
          The border color of the Admin Portal container.
        </ParamField>

        <ParamField path="borderRadius" type="string">
          The border radius of the Admin Portal container.
        </ParamField>

        <ParamField path="width" type="string">
          The width of the Admin Portal container.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="colors" type="object">
      The configuration object for colors used in the Admin Portal.

      <Expandable title="properties">
        <ParamField path="primary" type="string">
          Your primary brand color. This will be applied to most of the text in the Admin Portal.
        </ParamField>

        <ParamField path="secondary" type="string">
          Your secondary brand color. This will be applied to text disclaimers and other visual elements.
        </ParamField>

        <ParamField path="success" type="string">
          A success color to be used in visual elements.
        </ParamField>

        <ParamField path="error" type="string">
          An error color to be used in visual elements.
        </ParamField>

        <ParamField path="accentText" type="string">
          The text color for accent elements. This will be used for tags and select chips in the Admin Portal.
        </ParamField>

        <ParamField path="accent" type="string">
          An accent color to be used in visual elements. This will be applied to the background of tags and select chips in the Admin Portal.
        </ParamField>

        <ParamField path="subtle" type="string">
          The color used for miscellaneous elements that don't require visual elements, like dividers and table, popover menu, and accordion borders.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="buttons" type="object">
      The configuration object for buttons in the Admin Portal.

      <Expandable title="properties">
        <ParamField path="primary" type="object">
          The configuration object for primary buttons.

          <Expandable title="properties">
            <ParamField path="backgroundColor" type="string">
              The background color of the primary button.
            </ParamField>

            <ParamField path="textColor" type="string">
              The text color of the primary button.
            </ParamField>

            <ParamField path="borderColor" type="string">
              The border color of the primary button.
            </ParamField>

            <ParamField path="borderRadius" type="string">
              The border radius of the primary button.
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField path="secondary" type="object">
          The configuration object for secondary buttons.

          <Expandable title="properties">
            <ParamField path="backgroundColor" type="string">
              The background color of the secondary button.
            </ParamField>

            <ParamField path="textColor" type="string">
              The text color of the secondary button.
            </ParamField>

            <ParamField path="borderColor" type="string">
              The border color of the secondary button.
            </ParamField>

            <ParamField path="borderRadius" type="string">
              The border radius of the secondary button.
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField path="disabled" type="object">
          The configuration object for disabled buttons.

          <Expandable title="properties">
            <ParamField path="backgroundColor" type="string">
              The background color of the disabled button.
            </ParamField>

            <ParamField path="textColor" type="string">
              The text color of the disabled button.
            </ParamField>

            <ParamField path="borderColor" type="string">
              The border color of the disabled button.
            </ParamField>

            <ParamField path="borderRadius" type="string">
              The border radius of the disabled button.
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="inputs" type="object">
      The configuration object for text inputs in the Admin Portal.

      <Expandable title="properties">
        <ParamField path="backgroundColor" type="string">
          The background color of the text inputs.
        </ParamField>

        <ParamField path="textColor" type="string">
          The text color of the text inputs.
        </ParamField>

        <ParamField path="placeholderColor" type="string">
          The color of the placeholder text in the text inputs.
        </ParamField>

        <ParamField path="borderColor" type="string">
          The border color of the text inputs.
        </ParamField>

        <ParamField path="borderRadius" type="string">
          The border radius of the text inputs.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="fontFamily" type="string">
      The font family that will apply to text in the Admin Portal.
    </ParamField>

    <ParamField path="borderRadius" type="string">
      The default border radius for elements in the Admin Portal.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="config" type="object">
  The configuration object for the Admin Portal Member Management UI.

  <Expandable title="properties">
    <ParamField path="allowedAuthMethods" type="array[string]">
      Specify the auth methods that a Member can choose to enable when restricting the Organization's allowed auth methods. If not specified, all auth methods are shown.
    </ParamField>

    <ParamField path="allowedMfaAuthMethods" type="array[string]">
      Specify the MFA auth methods that a Member can choose to enable when restricting the Organization's allowed auth methods. If not specified, all auth methods are shown.
    </ParamField>

    <ParamField path="getRoleDisplayName" type="(role: Role) => string">
      A function that returns the display name for a role. By default, the `role.role_id` is used as the display name.
    </ParamField>

    <ParamField path="getRoleDescription" type="(role: Role) => string">
      A function that returns the description for a role. By default, the `role.description` is used as is.
    </ParamField>

    <ParamField path="getRoleSortOrder" type="(roles: Role[]) => string[]">
      A function that determines the sort order of the roles. Returns a list of role IDs in the desired order.
    </ParamField>
  </Expandable>
</ParamField>

<Panel>
  <CodeGroup>
    ```jsx theme={null}
    import { AdminPortalB2BProducts, AdminPortalOrgSettings } from "@stytch/nextjs/b2b/adminPortal";

    const styles = { fontFamily: "Arial" };

    const config = {
      allowedAuthMethods: [
        AdminPortalB2BProducts.emailMagicLinks,
        AdminPortalB2BProducts.password,
      ],
    };

    const OrganizationSettingsPage = () => {
      return <AdminPortalOrgSettings styles={styles} config={config} />;
    };

    export default OrganizationSettingsPage;
    ```
  </CodeGroup>
</Panel>
