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

    2.19.0 • Public • Published

    FAST Components

    License: MIT npm version

    @microsoft/fast-components is a library of Web Components that composes the exports of @microsoft/fast-foundation with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the quick start to get started using the components.


    From NPM

    To install the @microsoft/fast-components library, use either npm or yarn as follows:

    npm install --save @microsoft/fast-components @microsoft/fast-foundation
    yarn add @microsoft/fast-components @microsoft/fast-foundation

    Within your JavaScript or TypeScript code, import and register desired components with the DesignSystem:

    import { DesignSystem } from "@microsoft/fast-foundation"
    import { fastAnchor } from '@microsoft/fast-components';

    Alternatively you can easily register all components:

    import { DesignSystem } from "@microsoft/fast-foundation"
    import { allComponents } from '@microsoft/fast-components';
        Object.values(allComponents).map(definition => definition())

    Looking for a setup that integrates with a particular front-end framework or bundler? Check out our integration docs.

    From CDN

    A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding type="module" to the script element and then importing from the CDN.

    <!DOCTYPE html>
    <html lang="en">
            <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
        <!-- ... -->

    The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

    <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components@2.16.0/dist/fast-components.min.js"></script>

    :::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. :::


    To start the component development environment, run yarn start.

    Known issue with Storybook site hot-reloading

    Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the CustomElementsRegistry once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message: Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry

    This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.




    npm i @microsoft/fast-components

    DownloadsWeekly Downloads






    Unpacked Size

    3.28 MB

    Total Files


    Last publish


    • microsoft1es
    • fastsvc
    • eisenbergeffect
    • chrisdholt
    • awentzel
    • janechu
    • nirice