Component library

In the overview article for creating components, you learn about components inside a canvas app. As you create components inside an app, you can also create a library of components that you can reuse. By creating a component library, app makers can easily share and update one or more components with other makers.

Component libraries are containers of component definitions that make it easy to:

Discover and search components.
Publish updates.
Notify app makers of available component updates.

Note

Component libraries are the recommended way to reuse components across apps. When using a component library, an app maintains dependencies on the components it uses. The app maker is alerted when updates to dependent components become available. Hence, create reusable components within component libraries. An earlier Power Apps feature that allowed importing components from one canvas app to another is retired.

Difference between an app and a component library

A component library provides a centralized and managed repository of components for reusability.

The Insert pane on the left navigation defaults to a components tab if you create a component library. When you create an app, this view shows screens instead of components.

Note

The screens in a component library are available for testing only. It provides library creators a way to quickly test the created components on an actual screen and also validate the update behavior as components are enhanced over time. To use the components from the component library, you must create an app that uses the component library.

You can preview component library components by using the screens inside the library with the play option. When you select the component tab, the play option is disabled. The component library doesn't display when using Power Apps Mobile.

Note

The component library discussed in this article is different from the Power Apps component framework that enables developers and makers to create code components for model-driven and canvas apps. For more information, see Power Apps component framework overview.

Working with component library

You can create a new component library or edit an existing component library from the same interface. Go to Power Apps > select More from left navigation > select Discover all > select Component libraries from the App enhancements section. You can also pin Component libraries option to your Power Apps interface. For more information, see Left navigation in Power Apps.

Create an example component library

The steps to create components inside a component library are the same as creating components inside an app. You'll create a component library and then reuse the steps for creating components from components overview example. Then you use the component library to provide the reusable components in a new app.

Sign in to Power Apps.
Select Component libraries in the left navigation, and then select New component library. Alternatively, if you don't see Component libraries in the left nav, select More from the left navigation, select the Discover all button, and select Component libraries from the App enhancements section.
Name the component library Menu components; or provide a different name of your choice.
Follow the steps to create components from components overview example. You don't have to open Power Apps Studio or create a new blank app, since you already created a new component library. Start with step 2.

After following the steps to create components, follow the next set of steps to also add components to a screen and the steps to create output property.
After you complete the components creation and testing, save the component library by selecting the Save icon from the app actions.

You also have an option to Save with version notes under the arrow menu next to the Save icon. A version note is useful to retrieve versions of a component library and for upgrading the components used in apps from this component library. For more details about app actions, see the Understand Power Apps Studio article.

Tip

A version note is useful when reviewing versions of a component library and for the app makers using your component library to review changes and update apps consuming these components as needed. Go to update a component library for more details.
You can publish a saved component library. Only published component library updates are available for apps that consume a component library. Select the Publish icon from the app actions to publish the component library version:

Library component customization

When you create a component inside a component library, you can set whether apps that use the library components can customize the component. By default, this setting is On within the components properties. Turn this setting Off to remove the ability to customize the component in other apps.

Option to allow customization to this component when being used by an app.

When you add a component that allows customization, you see an option to edit this component for more customization. The app makes a local copy, and you can make changes to the local component copy. The association with the component library is removed once you edit the component.

Edit a component allowed for customization.

Selecting Edit component prompts you to copy the component locally for customization.

If you don't allow the components to be customized, the consuming apps don't show the option to edit the component.

No option to edit component inside consuming app.

In this case, the only way to edit the component is to edit the component library where the component is stored.

Import from a component library

After you create and publish a component library, apps can consume the components from this component library by importing the library. You can also share a component library.

To import from a component library, edit an existing app or create a new app. After the app opens in canvas app studio, select Insert or the + on the left navigation. Then select Get more components to list the component libraries available in the current environment:

Get more components.

You see the list of component libraries available in the current environment on the right side of the screen. Select an individual component from a component library. Or use Select all to import all of the components from the library at once:

Import components.

Note

If a maker doesn't see the component library listed in the import section, ensure the component library is shared with the maker. For more details, see component library permissions.

Note

You can select and import more than one component and across different component libraries.

Components available inside the app are listed under the Custom category in the list of components in the Insert pane. Components available from imported component libraries are listed under the Library components category:

Insert components to the app.

Update a component library

You can modify an existing component library and save any changes with other version notes. However, the updated component library version must be published for use in existing apps that use the component library. The example component library steps explain how to publish a component library after saving it.

There are two ways apps using the components from library can get the latest changes.

Method 1: Component update notification on app edit

Makers of other apps get notified when updated components are available. The notification appears when makers edit the apps in canvas app studio. They can choose to update the components:

Update available.

Select Review, and you see the option to update the component:

Update component.

Version notes you add when publishing the component library version appear here.

Select Update to update the components.

Method 2: Proactive check for updates

Use this method to check proactively for the app update while working on the app in Studio.

To do this check, select the Insert component panel on the left side, and then select the Check for updates icon.

Check for latest components

If there are updates for components used from the library, you get a message to review and get the latest changes. When you review and update, the app updates with the latest components.

Updating component from a component library in a consuming app

If you import a component from a component library, you can't edit it inside the consuming app. If you select Edit component, you see an option to create a copy of the component inside the current app so you can make changes:

Edit library component.

If you select Create a copy, the component is copied to the local app. The local copy of the component appears under the Custom category in the Insert pane. This local copy of the component doesn't receive updates if a new version of the originating component library is published later.

Note

The in-use instances of components from the component library aren't affected after you create a local copy of a component, and remain linked to the component library definition. Only instances of the locally copied components (from Custom category) are considered to be the local app components.

Deleting a component library

If a component library is referenced by a canvas app, it can't be deleted. This condition is true for both Power Platform and non-Power Platform environments. Remove the component from the app before deleting the library. You can find information about the apps using the component library in either solution dependencies view or in the message, which is shown when you try to delete library.

Delete library component.