@intugine-technologies/mui

MUI based UI library used internally at Intugine Technologies

📝 Table of Contents

• Getting Started
• Usage

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

This project is build as an wrapper on mui 5 and hence needs to installed separately.

# using npm
$ npm install --save @mui/material @mui/icons-material @emotion/react @emotion/styled

# using yarn
$ yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled

Installing

once the prerequisite is fulfilled you can proceed with installing the package though npm or yarn.

# using npm
$ npm install --save @intugine-technologies/mui

# using yarn
$ yarn add @intugine-technologies/mui

This theme is build considering Poppins as a default theme. To install the same 👇

# using npm
$ npm install --save @fontsource/poppins

# using yarn
$ yarn add @fontsource/poppins

More info about fontsource here.

Import the Poppins font into root file.

# Only import the following fontweight since we only be using below fontweights

import '@fontsource/poppins/400.css'
import '@fontsource/poppins/500.css'
import '@fontsource/poppins/600.css'
import '@fontsource/poppins/700.css'

🎈 Usage

1. Import theme and ThemeProvider. You have 2 default theme to use, namely - light & dark.

import { ThemeProvider } from '@mui/material/styles';
import { theme } from '@intugine-technologies/mui';

ReactDOM.render(
  <ThemeProvider theme={theme('light')}>
    <App />
  </ThemeProvider>
)

2. Import the component and use it like MuiComponents.

import { Button } from '@intugine-technologies/mui'

/* 
 * All the props from `MuiButton` + some custom ones are available. 
 * Full doc on custom props are available in storybook. https://storybook.intugine.local
 */
<Button>Click Me!</Button>