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


1 Comment

Phaser, a HTML5 game framework for developers - Blog React · July 27, 2020 at 3:38 am

[…] Fast a new UI library from Microsoft […]

Leave a Reply

Your email address will not be published. Required fields are marked *