User Experience is an integral part of web application. To create it is also a cumbersome task. So it's easy to use any existing UI frameworks. Google has a Material design which is a standard reference system for all other products. Semantic UI, Ant design etc are some examples. Fluent Design System is a design system created by Microsoft. It has lots of useful components, CSS, SASS classes, Icons etc. Fluent has fundamentals of principled design, innovation in technology. It works with all platforms like mobile, web, desktop. There are two flavours available: Fluent UI react and Fabric core.

Fabric core is similar to CSS libraries. It provides Fonts and typography, color palettes, layout helpers, animation helpers, icons, etc.

Fluent UI React is an open source React front end framework. It gives robust, up-to-date, accessible components which are highly customizable using CSS in JS. It contains React JS UI controls. Office 365, Outlook, and many other Microsoft products use Fluent UI React. 

Let’s see how to create a project using Fluent UI React. First step is to create a React project.

npx create-react-app fluent-ui-demo

Run the following command to add Fluent UI dependency.

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

We have to clone the starter repo of Microsoft.

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

Now install the dependencies using npm and start.

npm install  
npm start 

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;

You are all set to run the application.