DEV Community

Narender Saini
Narender Saini

Posted on

Fast a new UI library from Microsoft

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
Enter fullscreen mode Exit fullscreen mode
yarn add @microsoft/fast-components
Enter fullscreen mode Exit fullscreen mode

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>
<!-- ... -->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
hemant profile image
Hemant Joshi

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🙂

Collapse
 
mohsenalyafei profile image
Mohsen Alyafei

Thank you. This is helpful and useful.