Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<OrganizationList />

Organization List Example

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}`} /> ); }

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.

NameTypeDescription
hidePersonalbooleanBy 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.
skipInvitationScreenboolean | undefinedHides 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.
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
afterCreateOrganizationUrl((org: Organization) => string) | stringFull URL or path to navigate after creating a new organization.
afterSelectOrganizationUrl((org: Organization) => string) | stringFull URL or path to navigate after selecting an organization.
Defaults to undefined.
afterSelectPersonalUrl((org: Organization) => string) | stringFull 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.

What did you think of this content?

Clerk © 2023