Open In App

Fluent UI Introduction and Installation for React

Improve
Improve
Like Article
Like
Save
Share
Report

Microsoft’s Fluent UI, unveiled in 2017, is an open-source, cross-platform design system that empowers developers to craft seamless applications like Office 365. It guarantees a uniform and polished design across diverse platforms for a cohesive user experience.

Prerequisite:

Features of Fluent UI:

  • Highly customizable.
  • Up to date components.
  • Cross-platform.
  • Open-source.

Steps to Create React Application And Install Fluent UI:

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:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This is the only default component of our app that contains all the logic.

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:



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads