TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • 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

    4.19 MB

    Total Files


    Last publish


    • microsoft1es
    • microsoft-graph-toolkit