Magma components are web components: custom elements you write like HTML tags, with any framework or without one. React and Angular get a wrapper package that turns them into components of their own.

Quick start

Install the package for your framework, register the components you use and write them in your markup. Your choice of framework is kept for the other pages.

Install the package:

npm i @maggioli-design-system/magma

In the entry point of the app, register the components you use: each defineCustomElement* function registers a component and the ones it contains.

src/main.js

import {
  defineCustomElementMdsButton,
  defineCustomElementMdsText,
} from '@maggioli-design-system/magma/components';

defineCustomElementMdsButton();
defineCustomElementMdsText();

Then write them like HTML tags:

index.html

<mds-text typography="h3" tag="h1">Hello Magma</mds-text>
<mds-button variant="primary" tone="strong">Save</mds-button>

Install the wrapper and the package it wraps:

npm i @maggioli-design-system/magma-react @maggioli-design-system/magma

Import the components you use from the wrapper: importing one registers it.

src/App.jsx

import { MdsButton, MdsText } from '@maggioli-design-system/magma-react';

export default function App() {
  return (
    <>
      <MdsText typography="h3" tag="h1">Hello Magma</MdsText>
      <MdsButton variant="primary" tone="strong">Save</MdsButton>
    </>
  );
}

Install the wrapper and the package it wraps:

npm i @maggioli-design-system/magma-angular @maggioli-design-system/magma

Add the components you use to the imports of your component: each one registers itself.

src/app/app.ts

import { Component } from '@angular/core';
import { MdsButton, MdsText } from '@maggioli-design-system/magma-angular';

@Component({
  selector: 'app-root',
  imports: [MdsButton, MdsText],
  templateUrl: './app.html',
})
export class App {}

Then write them in its template like HTML tags:

src/app/app.html

<mds-text typography="h3" tag="h1">Hello Magma</mds-text>
<mds-button variant="primary" tone="strong">Save</mds-button>

The components also need Magma's styles and fonts, and mds-icon the icon files: the installation guide sets them up for each framework.Installation guide

All components

AccordionAccordion itemAccordion timerAccordion timer itemAuthorAvatarAvatar stackAvatar stack itemBadgeBannerBenchmark barBibliographyBreadcrumbBreadcrumb itemButtonButton dropdownButton groupCalendarCalendar cellCardCard contentCard footerCard headerCard mediaChipDetailsDropdownEmojiEntityFileFile previewFilterFilter itemHeaderHeader barHelpHorizontal scrollHrIconImgInputInput dateInput date rangeInput date range preselectionInput fieldInput otpInput rangeInput selectInput switchInput tipInput tip itemInput uploadKeyboardKeyboard keyKpiKpi itemLabelListList itemMentionModalNoteNotificationPaginatorPaginator itemPolicy aiPrefPref animationPref consumptionPref contrastPref languagePref language itemPref modePref themePref theme itemPrice tablePrice table featuresPrice table features cellPrice table features rowPrice table headerPrice table listPrice table list itemProgressPush notificationPush notification itemQuoteRadial menuRadial menu itemRadial progressSeparatorSpinnerStatus barStepper barStepper bar itemTabTab barTab bar itemTab itemTableTable bodyTable cellTable footerTable headerTable header cellTable rowTextToastTooltipTreeTree itemUrl viewUsageVideo wallZero