How to use Microsoft Fluent UI with React

As a frontend developer we always try to look for new UI frameworks. Even though we already have UI library like Material UI, Ant Design and many other. We still try to find new UI libraries. In this article we are going to learn how to use Microsoft Fluent UI with React.

Microsoft Fluent UI

Everyone know about Microsoft the biggest giant in IT sector. In 2017 Microsoft release a UI library named Fluent which can be use easily to create Apps like Web Apps, Windows Apps , Android and IOS Apps.

This Fluent UI is already used in many products of Microsoft like Note, Excel, Powerpoint, Sharepoint, Team and many more.

How to use Microsoft Fluent UI in React

Like any other package you can simply install Fluent UI using npm or yarn.

npm i @fluentui/react

For example if you want to use a Primary Button Component from Fluent UI you can simply use it like this.

import React from "react";
import { PrimaryButton } from "@fluentui/react";

export default function App() {
  return (
    <div className="App">
      <PrimaryButton>Primary Button </PrimaryButton>
    </div>
  );
}
Edit vehzz

Fluent UI React components can be rendered in a server-side Node environment which is a great thing. It also support RTL and LTR direction of components.

It includes a lot of component like Checkboxes, Dropdown, Label, Slider, Calendar, Color Pickers and many more other components.

You can see full list of components here.

If you want to see more UI library checkout this article.

Categories: Reactjs