Fluent UI Web Components Overview

  • Article

Microsoft's Fluent UI Web Components are designed to help you build Fluent web apps using extensible Web Components. The package composes the @microsoft/fast-foundation Web Component package and styles it with the Fluent design language. You can use these Web Components flexibly, either from npm packages, from the CDN, or you can bring it into your project to customize and extend it.

With Fluent UI Web Components you can:

  • Build a modern, standards-based, highly performant, highly accessible web front-end
  • Build a web front end using only web platform code, no other frameworks, or
  • Integrate with many popular frameworks like .NET, Blazor, Vue, React, etc.
  • Build a web-standards UX built with W3C Web Component standards
  • Leverage the existing Fluent UI design language as design tokens
  • Customize the design language for your project by modifying and creating new design tokens
  • Use the components out-of-the-box to build your web user experience or
  • Customize, compose and build new Web Components based on the libraries that Fluent UI Web Components is built on, FAST
  • Be part of a dynamic, open-web development community

What are Web Components?

"Web Components" is an umbrella term that refers to a collection of web standards focused on enabling the creation of custom HTML elements. Some of the standards under this umbrella include the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more. Each of these platform features is defined by the W3C and has shipped in every major browser today.

How does Fluent UI leverage Web Components?

Fluent UI Web Components are built directly on the W3C Web Component standards, and do not create their own separate component model. This allows our components to function the same as built-in, native HTML elements. You do not need a framework to use Fluent UI components but you can use them in combination with any framework or library of your choice. See Integrations for more.

Joining the community

Looking to get answers to questions or engage with us in real time? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

Next steps