<OrganizationProfile />

A full-featured organization management component

Overview

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.

Embedding an <OrganizationProfile /> component

1
import { OrganizationProfile } from '@clerk/clerk-react'
2

3
const OrganizationProfilePage = () => {
4
  return (
5
    <div
6
      style={{
7
        display: 'flex',
8
        flexDirection: 'column',
9
        gap: '2rem',
10
        justifyContent: 'center',
11
        alignItems: 'center'
12
      }}
13
    >
14
      <OrganizationProfile />
15
    </div>
16
  )
17
}
18

19
export default OrganizationProfilePage

Props

Name	Type	Description
afterLeaveOrganizationUrl?	string	Full URL or path to navigate after creating a leaving organization
path?	string	The path where the component is mounted when path-based routing is used. -e.g. /org-profile. This prop is ignored in hash and virtual based routing.
routing?	RoutingStrategy	The routing strategy for your pages. Supported values are: - hash (default): Hash based routing. - path: Path based routing. - virtual: Virtual based routing.
appearance?	object

Custom Styling

The <OrganizationProfile/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.