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