`<OrganizationList />`

The <OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.

Usage

/app/discover/page.[jsx/tsx]
import { OrganizationList } from "@clerk/nextjs";
 
export default function OrganizationListPage() {
  return (
      <OrganizationList
          afterCreateOrganizationUrl='/organization/:slug'
          afterSelectPersonalUrl='/user/:id'
          afterSelectOrganizationUrl='/organization/:slug'
      />
  );
}

/pages/discover.[jsx/tsx]
import { OrganizationList } from "@clerk/nextjs";
 
export default function OrganizationListPage() {
  return (
      <OrganizationList
          afterCreateOrganizationUrl={org => `/organization/${org.slug}`}
          afterSelectPersonalUrl={user => `/user/${user.id}`}
          afterSelectOrganizationUrl={org => `/organization/${org.slug}`}
      />
  );
}

discover.tsx
import { OrganizationList } from "@clerk/clerk-react";
 
export default function OrganizationListPage() {
  return (
      <OrganizationList
          afterCreateOrganizationUrl={org => `/organization/${org.slug}`}
          afterSelectPersonalUrl={user => `/user/${user.id}`}
          afterSelectOrganizationUrl={org => `/organization/${org.slug}`}
      />
  );
}

/route/discover.tsx
import { OrganizationList } from "@clerk/remix";
 
export default function OrganizationListPage() {
  return (
      <OrganizationList
          afterCreateOrganizationUrl={org => `/organization/${org.slug}`}
          afterSelectPersonalUrl={user => `/user/${user.id}`}
          afterSelectOrganizationUrl={org => `/organization/${org.slug}`}
      />
  );
}

Force Organizations

If you would like to prohibit people from using their personal accounts and force them to be part of an organization, the hidePersonal property forces your user to join or create an organization in order to continue.

organization-portal.tsx
export default function OrganizationListPage() {
  return (
    <OrganizationList
        hidePersonal={true}
        {...}
    />
  );
};

Properties

All props below are optional.

Name	Type	Description
`hidePersonal`	`boolean`	By default, users can switch between organization and their personal account. This option controls whether `<OrganizationList />` will include the user's personal account in the organization list. Setting this to `false` will hide the personal account entry, and users will only be able to switch between organizations. Defaults to `false`.
`skipInvitationScreen`	`boolean` \| `undefined`	Hides the screen for sending invitations after an organization is created. When left undefined Clerk will automatically hide the screen if the number of max allowed members is equal to 1. Defaults to `false`.
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`afterCreateOrganizationUrl`	`((org: Organization) => string)` \| `string`	Full URL or path to navigate after creating a new organization.
`afterSelectOrganizationUrl`	`((org: Organization) => string)` \| `string`	Full URL or path to navigate after selecting an organization. Defaults to `undefined`.
`afterSelectPersonalUrl`	`((org: Organization) => string)` \| `string`	Full URL or path to navigate after selecting the personal account. Defaults to `undefined`.

Customization

To learn about how to customize Clerk components, see the customization documentation.