@fluentui/web-components libraries contain Web Components built on top of our standard component and design system foundation.
fast-components express the FAST design language while
@fluentui/web-components expresses Microsoft's Fluent design language.
To install the components, first, choose between
@fluentui/web-components. Assuming a selection of
fast-components, you would use either
yarn as follows:
Looking for a setup that integrates with a particular front-end framework or bundler? Check out our integration docs.
A pre-bundled script that contains all APIs needed to use the components is available on CDN. You can use this script by adding
type="module" to the script element and then importing from the CDN.
The above CDN location points to the latest release of
fast-components. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
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.
Add the design system provider
The Design System Provider provides design information to child components. So, we must always wrap the portion of our site or app that uses the components with a provider element:
With the provider in place, add any components as a child of the
fast-design-system-provider. That's it! For a comprehensive list of all elements, see the Components section.