@mgdis/mg-components

Introduction

MG Components is a reusable component library designed to help MGDIS developers build user interfaces more efficiently. It provides a collection of modular, framework-agnostic UI components that are easy to use, accessible, and customizable. The library is built following the Atomic Design methodology, which organizes components into small, reusable building blocks.

Components in MG Components are developed using StencilJS, a compiler for creating fast, standards-based Web Components. This ensures compatibility with all modern browsers and seamless integration with any framework (e.g., AngularJS, Vue, etc) or even without a framework. The library also leverages StorybookJS for component documentation and testing.

Key Features

• Reusable Components: Modular and framework-agnostic, designed for flexibility and scalability.
• Accessibility: Built with WAI-ARIA standards to ensure inclusive user experiences.
• Customizable: Easily adaptable to your design system using CSS variables.
• Cross-Framework Compatibility: Works with AngularJS, Vue, or no framework at all.

Atomic Design

MG Components follows the Atomic Design methodology, which divides UI components into hierarchical levels:

• Atoms: Basic building blocks (e.g., buttons, icons).
• Molecules: Groups of atoms working together (e.g., input fields, menus).

Learn more about Atomic Design in this introduction to Atomic Design.