Skip to main content
Important

This feature is currently in Early Availability (EA) status. For more information, see our product lifecycle phases.

Components Library Integration

Introduction​

This document provides guidance on utilizing component libraries within your Platform Extension. The extension comes pre-packaged with the Mantine, Mantine-React-Table and remix icons libraries. These libraries are integrated to manage the theme and global styles of the platform extension effectively. Additionally, Mantine-React-Table is included to offer a pre-styled and ready-to-use datagrid.

Relevant Documentation​

Selection Rationale for Mantine​

Mantine has been chosen as the primary library for the following reasons:

  1. Active Maintenance and Variety: It is actively maintained and features over 100 pre-built components.
  2. Accessibility Focus: Designed with accessibility as a core principle.
  3. TypeScript Integration: Fully integrated with TypeScript for enhanced development efficiency.
  4. Developer Experience: Developed with a strong emphasis on the developer experience.

Integration of Additional Libraries​

While the extensions support a range of libraries, there are specific requirements for integrating open-source or enterprise customer libraries. This is crucial as the library will operate in a micro-frontend environment and must not conflict with global styles or other micro-frontends.

Integration Requirements​

  • Global Style Independence: The library should not import or rely on global styling.
  • Internal Style Generation: It should be capable of generating styles within the JavaScript bundle.

Libraries utilizing CSS-in-JS or CSS Modules generally meet these criteria.

Additional Supported Libraries​

Alongside Mantine, the platform extensions is compatible with:

caution

While these libraries are technically supported, they do not come with a custom theme tailored for our marketplace. You are responsible for creating and managing themes for these libraries.

Was this page helpful?

Tell us more…

Help us improve our content. Responses are anonymous.

Thanks

We appreciate your feedback!