Choosing the correct UI library for a project is always most confusing thing for developers. We already have a lot of options like Material UI, Ant Design, Fluent Design, etc. Recently Microsoft has lanuched one more UI library called Fast. In this article we will gonna see how Microsoft Fast is different from other UI library.
Microsoft’s Fast mainly focuses on the web components. It have a lot of pre-built web components. You can choose between two adaptive design systems: Fluent Design and FAST Frame. It can be easily integrated with any frontend framework.
Like any other package you can install it from yarn and npm. The
fast-components-msft libraries contain Web Components built on top of our standard component and design system foundation.
fast-components express the FAST design language while
fast-components-msft expresses Microsoft’s Fluent design language.
npm install --save @microsoft/fast-components
yarn add @microsoft/fast-components
To use Fast UI you need to wrap your app with a parent web component wrapper like this.
<!-- ... --> <body> <fast-design-system-provider use-defaults> </fast-design-system-provider> </body> <!-- ... -->
After that you are ready to use any web component in your app.
For example to use a button we can write.
<fast-design-system-provider use-defaults> <fast-button>Submit</fast-button> </fast-design-system-provider>
The out put will gonna look like this.
Same we have a lot of web components like progress, text-fields, tabs, slider, switch, radio, menu, dialog, cards, checkbox etc etc. You can see full components list here.