Fluent UI is an open-source, cross-platform design system that gives designers and developers the frameworks they need to build amazing applications. It is a design language developed in 2017 by Microsoft. Products such as Microsoft Office 365, OneDrive, Outlook, Azure, and much more use Fluent UI so that all the applications look consistent over different platforms. If you like the clean and minimalist look of Microsoft apps, it’s the one and only library you should use. In this article, we will be installing Fluent UI and will see how to use it with React.js.
Features of Fluent UI:
- Highly customizable.
- Up to date components.
- Cross-platform.
- Open-source.
Prerequisite:
- A code editor like (VS Code, Atom, Sublime, etc).
- NodeJS should be installed.Â
- Basics of React.js.
Let’s start building the React application.
Creating a React application:
Step 1: Create a React application by typing the following command in the terminal:
npx create-react-app fluentui-demo
Step 2: Now, go to the project folder i.e fluentui-demo by running the following command:
cd fluentui-demo
Project Structure: It will look like this:
Installing Fluent UI: To install Fluent UI run the below command in your working directory.
npm install @fluentui/react
Filename: App.js: This is the only default component of our app that contains all the logic. Here we will import the Fluent UI library and display a logo and some buttons.
Javascript
import './App.css'; import { DefaultButton, PrimaryButton }     from '@fluentui/react/lib/Button'; import { FontSizes } from '@fluentui/theme'; import { Icon } from '@fluentui/react/lib/Icon'; import { initializeIcons } from     '@fluentui/font-icons-mdl2';   function App() {       // Initialization for Fluent UI Icons     initializeIcons();     return (         <div className="App">             <span style={{ fontSize: FontSizes.size42 }}>                 Hello Geeks!             </span>             <br />             <Icon iconName="WindowsLogo" style={{                 fontSize: FontSizes.size68,                 color: '#0078d4'            }} />             <br />             <div>                 <DefaultButton className='btn'>                     Default Button                 </DefaultButton>                 <PrimaryButton className='btn'>                     Primary Button                 </PrimaryButton>             </div>         </div>     ); }   export default App; |
Output:
