Nested Parenthetical Madness
Wondering what’s next for npm?Check out our public roadmap! »

@microsoft/mgt-componentsTypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

Microsoft Graph Toolkit Web Components


The Microsoft Graph Toolkit (mgt) web components package is a collection of web components powered by Microsoft Graph. The components are functional, work automatically with Microsoft Graph, and work with any web framework and on all modern browsers.

Note: If you are building with React, you might find @microsoft/mgt-react useful as well.

See docs for full documentation


You can explore components and samples with the playground powered by storybook.

The Toolkit currently includes the following components:

The components work best when used with a provider. The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.

Get started

The components can be used on their own, but they are at their best when they are paired with an authentication provider. This example illustrates how to use the components alongside a provider (MsalProvider in this case).

  1. Install the packages

    npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal-provider
  2. Use components in your code

    <script type="module">
      import {Providers} from '@microsoft/mgt-element';
      import {MsalProvider} from '@microsoft/mgt-msal-provider';
      // import the components
      import '@microsoft/mgt-components';
      // initialize the auth provider globally
      Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
    <mgt-person person-query="Bill Gates" person-card="hover"></mgt-person>
    <mgt-agenda group-by-day></mgt-agenda>

Sea also


npm i @microsoft/mgt-components

DownloadsWeekly Downloads






Unpacked Size

3.01 MB

Total Files


Last publish


  • avatar
  • avatar