From 842d97124bb9cb0db8ca2d58b96328509d072cd3 Mon Sep 17 00:00:00 2001
From: Oswin Gan <oswin.gan@gmail.com>
Date: Sat, 16 Mar 2024 23:21:12 -0400
Subject: [PATCH] Added introduction to material UI materialui.md

---
 Topics/Tech_Stacks/materialui.md | 53 ++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 Topics/Tech_Stacks/materialui.md

diff --git a/Topics/Tech_Stacks/materialui.md b/Topics/Tech_Stacks/materialui.md
new file mode 100644
index 000000000..80170ac09
--- /dev/null
+++ b/Topics/Tech_Stacks/materialui.md
@@ -0,0 +1,53 @@
+# Material UI Guide
+
+## Introduction
+
+Material UI (MUI) is the most popular UI framework for React.
+
+It is an open-source library containing a large amount of components that can be seamlessly integrated into React applications to create a customizable user experience. MUI components are responsive, allowing for consistency across different screen sizes and platforms.
+
+## Installation
+
+Since MUI is a framework for React, ensure that dependencies `react` and `react-dom` are installed. They can be installed with `npm install react` and `npm install react-dom` respectively.
+
+To install MUI using npm, run the console command `npm install @mui/material @emotion/react @emotion/styled`
+
+To install with yarn, run `yarn add @mui/material @emotion/react @emotion/styled`
+
+## Importing Components
+
+Material UI components can be imported individually. For example, a `Button` component can be added to a .jsx file with the following:
+
+```js
+import Button from '@mui/material/Button';
+```
+
+Multiple components can be imported like this:
+
+```js
+import {
+    Box,
+    Button,
+    Grid,
+} from '@mui/material';
+```
+
+## Adding Components
+
+MUI components are utilized in a similar way to HTML in React JSX, with its own unique tags. MUI components are diffentiated from HTML with their capitalized tag names. Some components have variants that affect their styling.
+
+```js
+export default function ButtonUsage() {
+  return <Button variant="contained">Hello world</Button>;
+}
+```
+
+## Mobile Rendering
+
+Material UI components are primarily developed for mobile devices, which are then scaled up for larger viewports. It is highly recommended to add the viewport meta tag, which ensures proper rendering and touch zooming for all devices.
+
+`<meta name="viewport" content="initial-scale=1, width=device-width" />`
+
+## Manual
+
+For a detailed introductory guide to Material UI with usage examples, visit https://mui.com/material-ui/getting-started/
\ No newline at end of file