loading...

Fast a new UI library from Microsoft

narendersaini32 profile image Narender Saini ・2 min read

Fast a new UI library from Microsoft

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.

Fast a new UI library from Microsoft submit button

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.

The best Reactjs UI frameworks/library in 2020

Posted on by:

narendersaini32 profile

Narender Saini

@narendersaini32

I am Senior Reactjs developer with 4 year of experience. Apart from freelancing work I am a mentor teaching 100's of students around the globe. I love to share knowledge regarding Reactjs.

Discussion

markdown guide
 

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.