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:

``bash
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.

`bash
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 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. |
| Badge | A component for displaying Badges 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. |
| Flex | Flexbox based column layout. |
| 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. |
| RatingStars | A component for displaying a ratings star. |
| 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. |



Contact me for more details.