Tutorial: Install the Fluent UI Web Component packages
In this tutorial, you learn how to:
- Install the packages with NPM or Yarn
- Register & use individual web components
- Register and use all the components
Prerequisites
Running locally on your machine, you should have:
- Node.js
- Node Package Manager (NPM) and/or Yarn
- A Typescript pre-processor - not strictly necessary but most of our examples are in TypeScript. Recommended
Install the Fluent UI Web Component packages with NPM or Yarn
To install the component packages using NPM:
npm install --save @fluentui/web-components
Or with yarn:
yarn add @fluentui/web-components
Register & use the web components
To use a Fluent UI Web Component as a custom element in HTML, the custom element must be registered for the browser to recognize it. The two steps to registering the custom component are Importing the component definition into your JavaScript bundle, and registering it with a DesignSystem.
Here is a fluent Button getting imported and registered:
import { fluentButton, provideFluentDesignSystem } from '@fluentui/web-components';
provideFluentDesignSystem().register(fluentButton());
Register & use all web components
As a shortcut, if you wish to easily register all available components, rather than registering each one separately, you can use the following pattern with either design system:
import { allComponents, provideFluentDesignSystem } from '@fluentui/web-components';
provideFluentDesignSystem().register(allComponents);
Note
When working with a tree-shaking bundler like Webpack or [Rollup])(https://rollupjs.org/guide/en/), you will want to import and register the individual components, as in the first example above. This will ensure that any unused components are tree-shaken out of your builds.
Looking to integrate with a front-end framework or bundler? Check out the integration docs.
Next steps
Learn how to customize the look of the components