// insert in bootstrap file of client part of your application

import { defineCustomElements } from "@maggioli-design-system/magma/loader";

defineCustomElements();

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from '@maggioli-design-system/magma/loader/index.es2017.mjs';
      defineCustomElements();
    </script>
  </head>
  <body>
    <mds-text>Hello world</mds-text>
  </body>
</html>

Style

Import style used by components

/* global.css */

// color
@import "@maggioli-design-system/styles/dist/css/colors-rgb.css";

// font
@import '@fontsource/karla/400.css';
@import '@fontsource/karla/700.css';
@import '@fontsource/merriweather/400.css';
@import '@fontsource/merriweather/700.css';
@import '@fontsource/roboto-mono/400.css';
@import '@fontsource/roboto/500.css';
@import '@fontsource/roboto/700.css';
@import '@fontsource/roboto/900.css';

For more details see the library

Icon

Set the path where the mds-icon component will get the svg icons

window.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');

If you are using React set this inside UseEffet otherwise window is not defined

For greater interoperability between components and frameworks, see the specific libraries for Angular and React

FAQs

What is @maggioli-design-system/magma?

Is @maggioli-design-system/magma popular?

Is @maggioli-design-system/magma well maintained?

Package last updated on 19 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install