# Composable UserProfile and OrganizationProfile components

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:

filename: terminal
```bash
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:

```tsx
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:

```tsx
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.