`<OrganizationProfile />`

The <OrganizationProfile /> component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings.

Usage

You can embed the <OrganizationProfile /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application.

/app/organization-profile/[[...organization-profile]]/page.[jsx/tsx]
import { OrganizationProfile } from "@clerk/nextjs";
 
export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile routing='path' path="/organization-profile" />
  )
}

/pages/organization-profile/[[...index]].[jsx/tsx]
import { OrganizationProfile } from "@clerk/nextjs";
 
export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile />
  )
}

organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile />;
}

/pages/organization-profile/$.tsx
import { OrganizationProfile } from "@clerk/remix";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile />;
}

Properties

All props below are optional.

Name	Type	Description
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate after leaving an organization.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages.
`path`	`string`	The path where the component is mounted when path-based routing is used. -e.g. /create-org. This prop is ignored in hash and virtual based routing.
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.