Jul 27

Composable UserProfile and OrganizationProfile components

Category: SDK
Published: Jul 27

Build your own profile pages from Clerk’s building blocks, now available as an experimental API.

We’re shipping an experimental API that breaks <UserProfile /> and <OrganizationProfile /> into composable building blocks. Instead of mounting the whole component, you can assemble a profile page from the exact panels and sections you want, in the order you want them.

The building blocks live in the @clerk/ui package, which isn’t included with your Clerk SDK — install it as a direct dependency:

terminal

npm install @clerk/ui

Render the built-in panels

Wrap the building blocks in a provider and drop in a panel to render the same content Clerk renders today:

import {
  UserProfileProvider,
  UserProfileAccountPanel,
  UserProfileSecurityPanel,
} from '@clerk/ui/experimental'

export default function Page() {
  return (
    <UserProfileProvider>
      <UserProfileAccountPanel />
      <UserProfileSecurityPanel />
    </UserProfileProvider>
  )
}

Compose your own sections

Pass sections as children to a panel to pick and reorder only the pieces you need:

import {
  UserProfileProvider,
  UserProfileAccountPanel,
  UserProfileProfileSection,
  UserProfileEmailSection,
  UserProfilePhoneSection,
} from '@clerk/ui/experimental'

export default function Page() {
  return (
    <UserProfileProvider>
      <UserProfileAccountPanel>
        <UserProfileProfileSection />
        <UserProfileEmailSection />
        <UserProfilePhoneSection />
      </UserProfileAccountPanel>
    </UserProfileProvider>
  )
}

The same pattern applies to organizations with OrganizationProfileProvider, its panels (OrganizationProfileGeneralPanel, OrganizationProfileMembersPanel, and more), and their sections.

Experimental

This API is exported from @clerk/ui/experimental and is not covered by semantic versioning. The set of components, their names, and their props may change in any release while we gather feedback. We’d love to hear how you’re using it.