OrganizationProfile

The <OrganizationProfile> component provides a tabbed organisation management interface: overview, members, settings, and enterprise SSO status. It uses the Customer API with the signed-in user's access token.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { OrganizationProfile } from "@wocha/ui";
import "@wocha/ui/styles.css";

Basic usage

<OrganizationProfile orgId="org_abc123" />

When orgId is omitted, the active organisation from auth context is used.

Props

Prop	Type	Default	Description
`orgId`	`string`	Active org from context	Organisation ID to manage
`appearance`	`WochaAppearance`	—	Visual customisation
`className`	`string`	—	Additional class name
`sections`	`OrgProfileSection[]`	All built-in sections	Sections to display
`activeSection`	`OrgProfileNavId`	`"overview"`	Currently active section
`onSectionChange`	`(section) => void`	—	Called when the user changes section
`fallback`	`ReactNode`	—	Shown while organisation data is loading
`children`	`ReactNode`	—	Composition children (`OrganizationProfile.Page`, `OrganizationProfile.Link`)

OrgProfileSection is "overview" | "members" | "settings" | "security".

Composition API

Add custom organisation pages:

<OrganizationProfile>
  <OrganizationProfile.Page label="Integrations" url="integrations" icon={<PlugIcon />}>
    <IntegrationsPage />
  </OrganizationProfile.Page>
  <OrganizationProfile.Link label="Console" url="https://console.wocha.ai" />
</OrganizationProfile>

Open via <OrgSwitcher> rather than embedding directly:

// Modal — opens in overlay from OrgSwitcher menu
<OrgSwitcher organisationProfileMode="modal" />
 
// Navigation — routes to dedicated page
<OrgSwitcher
  organisationProfileMode="navigation"
  organisationProfileUrl="/settings/organisation"
/>

Theming

<WochaThemeProvider
  appearance={{
    organisationProfile: {
      variables: { "--wocha-color-primary": "#2563eb" },
    },
  }}
>
  <OrganizationProfile />
</WochaThemeProvider>

Framework notes

Requires apiUrl on your provider. Works in client components for both React and Next.js.

OrganizationProfile

On this page