Fluent UI Introduction and Installation for React
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() {
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
Share your thoughts in the comments
Please Login to comment...