Introduction

import { Meta } from '@storybook/addon-docs/blocks'; import pkg from '../../../package.json'; import fluentImg from '../../../.storybook/fluent.webp';

<h2>What's new</h2>

<div className="whats-new-cards">

  <div>
    
    <p>Lightweight components built with performance in mind.</p>
  </div>

  <div>
    
    <p>Themeable tokens system for cohesion across products.</p>
  </div>

  <div>
    
    <p>Built with web standards and zero external dependencies.</p>
  </div>
</div>

Overview

Microsoft's Fluent UI Web Components is designed to help you build web apps using Web Components styled with the Fluent design language.

Each component is designed to adhere to the following standards:

• Customizable: Fluent-styled components by default, but easy to integrate your own brand and theme
• Performance: Optimized for performance
• Bundle size: Refactored and slimmed down components that allow you to include the packages and dependencies you need
• Interoperability: Works with any modern JavaScript framework
• Accessibility: WCAG 2.2 compliant and tested by trusted testers
• Design to Code: Stay up to date with Fluent Design Language changes via Design Tokens

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 that are under the 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 Web Components leverage Web Components?

Fluent UI Web Components is built directly on the W3C Web Component standards, and does not create its own 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.

When is the official release planned?

While we don't expect any major (breaking) changes in our Release Candidate, we're actively listening to user feedback and responding accordingly. Once partners and the rest of the Fluent project give required approvals, we'll publish the official V3 release.

Questions

Reach out to the Fluent UI Web Components team on Github