Getting started with Microsoft Fluent UI React

This article was originally published here.

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

To create great user experience is never easy task. So most of times user UI frameworks will reduce the time and increase productivity. We know that all the products of Google same uses a design system known as Material Design. So there are bunch of other systems are available like Semantic UI, Ant Design, etc. So when we see the Microsoft products like Outlook, Azure, Azure Devops,etc they all are very good and UI is consistent as well. So Microsoft team create a design system called Fluent Design System.

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 number of components, tools that helps users to create great user experiences in all the platform like Web, Mobile, 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:

• Fluent UI React
• 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 look and feel of your application similar to Microsoft products you may think of like what font family and font sizes need to use and all these 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:

• Fonts and typography
• Color palettes
• Layout helpers
• Animation helpers
• Icons
• etc.

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

Fluent 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 same sets of controls and offerings that many similar libraries gives you things like Buttons, Dropdowns, Grids, Checkbox, etc and standard components. It also contains Microsoft controls as well like Datepickers, People pickers, persona, etc.

Some of the Microsoft products uses Fluent UI React.

• 45 additional Microsoft sites and products

You can checkout the github repo here.

Creating new Fluent UI React project

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

Create a new React project:

 npx create-react-app fluent-ui-demo

Once application is created we can run below command to add Fluent UI dependency:

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

That's it.

Another way is that Microsoft created a starter repo which has 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

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 to see output.

This is just an introductory article. In the next article we will be creating simple Todo application using Fluent UI React.

Conclusion

In this article, I have explained Microsoft Fluent Design System and discuss about Fluent UI React. Also, I demonstrated how to add Fluent UI React library to 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!!