Skip to main content
Important

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

Components library

Introduction

Extensions can use component libraries in their UI. The extension template includes Mantine, Mantine-React-Table, and Remix Icon. These libraries handle theme and global styles. Mantine-React-Table provides a pre-styled data grid.

Documentation

Why Mantine

Mantine is the primary library because it:

  1. Active maintenance and variety: Actively maintained with over 100 pre-built components.
  2. Accessibility: Designed with accessibility in mind.
  3. TypeScript: Full TypeScript support.
  4. Developer experience: Built for a smooth development workflow.

Adding other libraries

Extensions can use other libraries, but any library must work in a micro front-end environment without conflicting with global styles or other extensions.

Requirements

  • No global styles: The library must not depend on or inject global styles.
  • Scoped or JS-based styles: Styles should be generated inside the JavaScript bundle (for example, CSS-in-JS or CSS Modules).

Libraries that use CSS-in-JS or CSS Modules usually meet these requirements.

Other supported libraries

In addition to Mantine, extensions are compatible with:

caution

These libraries are supported but do not include a marketplace-specific theme. You must create and maintain themes for them yourself.

Was this page helpful?