feat(ui): add composed OrganizationProfile panels and section components

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+ default: m.OrganizationAPIKeysPage,
+ })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+ default: m.OrganizationBillingPage,
+ })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+ default: m.OrganizationPlansPage,
+ })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+ default: m.OrganizationStatementPage,
+ })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+ import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+ default: m.OrganizationPaymentAttemptPage,
+ })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+ <BillingSection
+ billing={OrganizationBillingPage}
+ plans={OrganizationPlansPage}
+ statement={OrganizationStatementPage}
+ paymentAttempt={OrganizationPaymentAttemptPage}
+ />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+ const card = useCardState();
+ return (
+ <ProfileCard.Page>
+ <ProfileCard.PagePanel
+ pageId='organizationGeneral'
+ titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+ alertContent={card.error}
+ >
+ {children}
+ </ProfileCard.PagePanel>
+ </ProfileCard.Page>
+ );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+ if (!children) {
+ return <OrganizationGeneralPage />;
+ }
+
+ // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+ // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+ return (
+ <PageContext.Provider value='general'>
+ <CardStateProvider>
+ <GeneralComposed>{children}</GeneralComposed>
+ </CardStateProvider>
+ </PageContext.Provider>
+ );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+ 'OrganizationProfileDeleteSection',
+ OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+ 'OrganizationProfileLeaveSection',
+ OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+ 'OrganizationProfileProfileSection',
+ OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+ if (!useRequirePage('OrganizationProfileDomainsSection')) {
+ return null;
+ }
+ return (
+ <Protect permission='org:sys_domains:read'>
+ <OrganizationDomainsSection />
+ </Protect>
+ );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { ProfileProviderShell, resolveComposedClerkRuntime } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+ appearance?: Appearance;
+ afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+ apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+ const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+ const clerk = useClerk();
+ const { isLoaded, user } = useUser();
+ const { organization } = useOrganization();
+
+ const { environment, moduleManager } = resolveComposedClerkRuntime(clerk, isLoaded);
+
+ if (!isLoaded || !user || !organization || !environment) {
+ return null;
+ }
+
+ const orgProfileCtxValue = {
+ componentName: 'OrganizationProfile' as const,
+ mode: 'mounted' as const,
+ routing: 'hash' as const,
+ path: undefined,
+ afterLeaveOrganizationUrl,
+ apiKeysProps,
+ customPages: [],
+ };
+
+ return (
+ <ProfileProviderShell
+ clerk={clerk}
+ environment={environment}
+ moduleManager={moduleManager}
+ appearanceKey='organizationProfile'
+ flow='organizationProfile'
+ globalAppearance={clerk.__internal_getOption('appearance')}
+ appearance={appearance}
+ >
+ <SubscriberTypeContext.Provider value='organization'>
+ <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+ </SubscriberTypeContext.Provider>
+ </ProfileProviderShell>
+ );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+ const contentRef = useRef<HTMLDivElement>(null);
+
+ return (
+ <CardStateProvider>
+ <OrganizationSecurityPage contentRef={contentRef} />
+ </CardStateProvider>
+ );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+ describe('General page', () => {
+ it('renders the organization general page', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('General');
+ });
+
+ it('shows organization name', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+ });
+
+ fixtures.clerk.organization?.getDomains.mockReturnValue(
+ Promise.resolve({
+ data: [],
+ total_count: 0,
+ }),
+ );
+
+ render(<OrganizationGeneralPage />, { wrapper });
+ screen.getByText('TestOrg');
+ });
+ });
+});