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.
What is Fast ?
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.
FAST is a collection of JavaScript packages centered around web standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.
Installation
Like any other package you can install it from yarn and npm. The fast-components and 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
Usage
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.
Top comments (2)
Hii Narender..
The list is awesome also want you to please add Chakra UI too.. it have some of good component's
I have a small question based on using UI Library.
As I am using react if I import multiple libraries like Material UI and Bootstrap in Same app or more then 3-4 UI Library.
Will this step slow my app?
Also I If I use Diffrent libraries in single app how would I remove unsuses component's?
Thank you🙂
Thank you. This is helpful and useful.