No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.



Fluent UI Web Components v3.0.0-beta.86


⚠️ While in Beta, breaking changes may be made based on feedback from users. This space is useful for testing new components whose APIs might change before final release.


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.1 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.


Questions


Reach out to the Fluent UI Web Components team on Github