Mfg-ui-components NPM

A modern and reusable UI components package for React applications built with TypeScript. This library offers customizable, flexible, and user-friendly UI elements for faster development.

Installation

Install the package using npm or yarn:

npm install mfg-ui-components
# or
yarn add mfg-ui-components

Demo Link

Go to documentation for batter understanding and use

Usage

Import and use the components in your React application:

Please import the stylesheet before importing any of the component.

import React from 'react';
import "mfg-ui-components/dist/styles.css";
import { Button } from 'mfg-ui-components';

const App: React.FC = () => {
  const handleClick = () => alert('Button clicked!');

  return <Button onClick={()=> handleClick()} ButtonClass='primary' ButtonId={"customId"} ariaSelected={true} children={"link label"} customClass={"buttonCustomClass"} />;
};

export default App;

Available Components

Component Name	Description
Accordian	A component for creating collapsible content.
Alert	A component for displaying alerts to users.
Banner	A component for displaying a banner or header at the top of a page.
BreadCrumb	A component for displaying breadcrumb navigation.
Button	A component for creating clickable buttons.
Card	A component for displaying content in a card-like format.
DatePicker	A component for selecting a date from a calendar.
DragDrop	A component for implementing drag and drop functionality.
Dragable	A component for making elements draggable.
Dropdown	A component for displaying a dropdown menu.
FlexWrap	A component for creating a flexible container with wrapping content.
Heading	A component for displaying headings or titles.
Image	A component for displaying images.
ImageGallerySlider	A component for displaying a gallery of images with sliding functionality.
ImageSlider	A component for displaying a slider for displaying images.
Label	A component for displaying labels or text.
List	A component for displaying a list of items.
ListItem	A component for displaying a single item in a list.
Loader	A component for displaying a loading indicator.
Modal	A component for displaying a modal window.
MultiselectDropdown	A component for creating a multi-select dropdown menu.
NavBar	A component for displaying a navigation bar.
Pagination	A component for displaying pagination for navigating through multiple pages.
ProgressBar	A component for displaying a progress bar.
RangeSlider	A component for displaying a range slider for selecting a range of values.
Search	A component for creating a search bar or input field for searching.
Select	A component for creating a dropdown or select input field.
SelectOptions	A component for displaying options in a select input field.
StickyNote	A component for displaying sticky notes for reminder of pending tasks
Switch	A component for creating a toggle switch.
TabMenu	A component for creating a tab menu or navigation with multiple tabs.
TableWithCol	A component for displaying a table with columns.
TableWithoutCol	A component for displaying a table without columns.
TextEditor	A component for creating a text editor or input field for editing text.
TextField	A component for creating a text input field.
Wrapper	A component for creating a flexible container for wrapping content.
ToolTip	A component for displaying tooltips or pop-up messages.