Getting Started With Microsoft Fluent UI React

Have you ever wanted to create a User Interface similar to Microsoft products? Have you heard about Microsoft Fluent UI?  In this article, we will see what  Fluent UI is and how to integrate it in the React application.

 

Creating great user experience is never an easy task. So most of the time we prefer to use existing UI frameworks will reduce the time and increase productivity. We know that all the products of Google use a similar design system known as Material Design. So there are a bunch of other systems  available like Semantic UI, Ant Design, etc. When we see the Microsoft products like Outlook, Azure, Azure DevOps, etc they all are very nice user interfaces and the UI is consistent as well. So Microsoft Teams created a design system called Fluent Design System which has lots of components, CSS and SASS classes, Icons, etc. 

 

What is Microsoft Fluent Design System? 

 

According to Microsoft doc,

 

Fluent brings the fundamentals of principled design, innovation in technology, and customer needs together as one. It’s a collective approach to creating simplicity and coherence through a shared, open design system across platforms. 

 

Fluent Design System is a whole ecosystem consisting of a number of components and tools that help users to create great user experiences in all the platforms like Web, Mobile, and Desktop applications. In this article, we will see more about Fluent UI for Web. So Fluent UI for the web is available in two flavors,

1. Fluent UI React
2. Fabric Core

Fabric Core

 

When we think of other CSS libraries like Bootstrap you can find lots of similarities in Fabric core. When you wanted to match the look and feel of your application similar to Microsoft products you may think of  what font family and font sizes you need to use and all the things you have to do manually.

 

Fabric Core is an open-source collection of CSS classes and Sass mixins that give you access to colors, animations, fonts, icons and grid.

 

 Fabric Core provides,

1. Fonts and typography
2. Color palettes
3. Layout helpers
4. Animation helpers
5. Icons
6. etc.

Fabric Core is basically useful for non-React applications and static pages. To know more about it you can see the documentation here.

 

Fabric UI React

 

According to documentation,

 

Fluent UI React is the official open-source React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. It provides robust, up-to-date, accessible components which are highly customizable using CSS-in-JS.

 

Fluent UI React contains React JS UI controls. It has the same sets of controls and offerings that many similar libraries give you --  things like Buttons, Dropdowns, Grids, Checkbox, etc and standard components. It also contains Microsoft controls as well as Datepickers, People pickers, persona, etc.

 

 

Below are the Microsoft products which use Fluent UI React,

 

 

+ 45 additional Microsoft sites and products. You can check out the GitHub repo here.

 

Creating new Fluent UI React project

 

The most common way of creating the React app is to use Create React App a development pack created by the React team.

 

Create a new React project,

npx create-react-app fluent-ui-demo

Once the application is created then run below command to add Fluent UI dependency,

cd fluent-ui-demo
npm i @fluentui/react

That's it.

 

Microsoft created a starter repo which has the same structure as Create React App.

 

So clone the starter repo,

git clone https://github.com/microsoft/create-react-app-uifabric.git fluent-ui-demo
cd fluent-ui-demo

Install dependencies and start the app. 

npm install
npm start

Now open the App.js file and import a primary button from @Fluentui/react package.

import React from 'react';
import './App.css';
import { PrimaryButton } from '@fluentui/react';

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <PrimaryButton>Button</PrimaryButton>
      </div>
    </div>
  );
}

export default App;

Run the app and see the output. 

 

This is just an introductory article and I will be writing more articles on Fluent UI React. In the next article, we will be creating simple Todo application using Fluent UI React and also using different controls.

 

Conclusion

 

In this article, I have explained Microsoft Fluent Design System and discussed about Fluent UI React. Also, I demonstrated how to add Fluent UI React library to an application. I really hope that you enjoyed this article, share it with friends and please do not hesitate to send me your thoughts or comments.

 

You can follow me on twitter @sumitkharche01 

 

Happy Coding!!