Building and Sharing a Unified Component Library in Power Apps

If you have ever maintained multiple canvas apps for the same organization, you know the frustration of updating a header or a search bar in ten different places. You might have copy-pasted a group of controls from one app to another, only to realize the original version has a bug that needs fixing everywhere. Component libraries solve this by providing a single source of truth for your UI building blocks. Unlike the deprecated per-app import feature, a component library lets you publish a component once and push updates to every app that consumes it.

In this article, we will build a reusable User Profile Card, share it through a library, and walk through the update workflow step by step.

The Scenario

Imagine you work for Northwind Traders. You are building an employee directory app and a project management app. Both apps need to display a consistent user profile card showing the person’s photo, name, department, and phone number. Instead of re-creating this card in both apps, you will build it once inside a component library called Northwind Base Components.

Step 1: Create the Component Library

Navigate to make.powerapps.com and select Apps from the left navigation. Click the down-arrow on the Create button and choose Component Libraries from the list. Give it a meaningful name (for instance, Northwind Base Components) and click Create.

The studio opens directly on the Components tab. The toolbox is almost identical to a canvas app, but the App tab is missing.

Step 2: Build the User Profile Card

Rename the default component from Component1 to cmp_UserProfileCard.

Our card will need a few custom Input Properties so the consuming app can tell it which user to display:

• UserEmail (Text) — the email address of the user.
• BorderColor (Color) — the colour of the card border.
• ShowPhone (Boolean) — whether to display the phone number.

Add these properties via the Properties tab on the left side of the studio.

Now insert the following controls inside the component:

• A Rectangle or Container for the card background.
• An Image control named img_Avatar.
• Labels named lbl_DisplayName, lbl_Department, and lbl_Phone.

Wire the custom properties into the controls:

Image control (Image property)

LookUp(
  Office365Users,
  Mail = cmp_UserProfileCard.UserEmail,
  Photo
)

Display Name label (Text property)

With(
  {varUser: LookUp(Office365Users, Mail = cmp_UserProfileCard.UserEmail)},
  varUser.DisplayName
)

Department label (Text property)

With(
  {varUser: LookUp(Office365Users, Mail = cmp_UserProfileCard.UserEmail)},
  varUser.Department
)

Phone label (Text property)

If(
  cmp_UserProfileCard.ShowPhone,
  With(
      {varUser: LookUp(Office365Users, Mail = cmp_UserProfileCard.UserEmail)},
      varUser.PhoneNumber
  ),
  ""
)

Card border (BorderColor property of the rectangle or container)

cmp_UserProfileCard.BorderColor

Once everything is connected, Save and Publish the library. Publishing is what makes the component available outside the library.

Step 3: Import Existing Components

Did you build a great component in an older app? You can migrate it into your new library.

1. In the library editor, go to File → Settings → Upcoming features → Retired tab.
2. Toggle Export and import components to On.
3. A ... menu now appears next to the New component button. Click it and choose Import components.
4. Select the app that contains the component you want to migrate, choose the component, and confirm the import.

The imported component is now part of the library. You can refactor its custom properties and internal logic to match your new standards without affecting the original app.

Step 4: Consume the Library in a Canvas App

Open the target app (e.g., Northwind Employee Directory).

1. Click Insert in the left pane.
2. Scroll down to Library components or click Get more components.
3. Select the Northwind Base Components library.
4. Check cmp_UserProfileCard and click Import.

The component appears on your screen. Configure it by setting its properties in the formula bar or the property pane:

{
  UserEmail: "mark.hanson@northwind.com",
  BorderColor: Color.DarkGreen,
  ShowPhone: true
}

You can insert the same component on multiple screens by finding it under Library components in the Insert pane. Every instance shares the logic defined in the library.

Step 5: Push Updates to Consuming Apps

A few weeks later the design team decides the user card needs an updated layout and a new Location field.

1. Open Northwind Base Components.
2. Modify cmp_UserProfileCard. Add the new layout and a new custom property ShowLocation.
3. Save and Publish the library.
4. Open the consuming app (e.g., Northwind Employee Directory). A yellow banner appears: Updates available for some component libraries used in this app. Review.
5. Click Review, select the library, and click Update.

All existing instances of the card in the app are updated to the new layout. The new ShowLocation property is now available in every place the component is used.

Security, Performance, and Delegation

While component libraries are a huge time-saver, keep these points in mind:

• Connectors in Libraries: Adding a data source (such as Office 365 Users or Dataverse) directly to the library makes the component self-contained, but every consuming app must have the same connector permissions. If you pass data purely through custom properties, the component is more reusable across different security contexts.
• Delegation: Any data queries inside the component (e.g., Filter, LookUp) are subject to the same delegation limits as the host app. The library itself does not provide a performance boost.
• Environment Bound: Component libraries are scoped to their environment. To share them across environments, export them as part of a managed solution using the Power Platform CLI or the standard solution export/import flows.

Common Mistakes and Troubleshooting

Here are the pitfalls I see most often:

1. Library not published: The most frequent issue. If the app cannot find the component or shows an error, ensure the library was published — saving alone is not enough.
2. Accidental app creation: You can build test screens inside a library, but do not publish the library as an app. Users will not be able to run it, and they will see an error.
3. Circular references: A component in a library cannot be inserted into another component within the same library. Use custom properties to pass data between them.
4. Deleted libraries: If a library is deleted from the environment, every app that depends on it will show broken grey boxes. Always communicate with app owners before removing a library, and archive it in a solution if necessary.

Final Recommendation

Adopt component libraries for every UI element that appears in two or more apps. Start with a focused library (e.g., Northwind Navigation) and expand as you prove the pattern. Document your custom properties in a shared wiki or README so new developers know how to consume them. Treat your library like a formal software package: update sparingly, test thoroughly, and communicate breaking changes to your team.

References

• Matthew Devaney, Make A Power Apps Component Library To Share And Reuse Components, https://www.matthewdevaney.com/make-a-power-apps-component-library-to-share-and-reuse-components/
• Microsoft Learn: Component libraries in Power Apps, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/component-library
• Microsoft Learn: Create a component library, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-component-library