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](https://mfg-thedeveloper.com/mfg-ui-components/) 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 <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.                                                      |
| 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](https://mfg-thedeveloper.com/) for more details.