MABESI REACT COMPONENTS

A modern, TypeScript-based React component library designed for flexibility, accessibility, and ease of use.

👀 Overview

Mabesi React Components is a comprehensive UI library built to accelerate web development with React. It focuses on providing a set of high-quality, customizable, and accessible components that fit seamlessly into modern applications.

Built with TypeScript, it ensures type safety and excellent developer experience with full IntelliSense support. The library is designed with accessibility (a11y) in mind, following WAI-ARIA best practices to ensure your applications are usable by everyone. It also features a robust theming system and built-in internationalization (i18n) support, making it ready for global products right out of the box.

Whether you are building a simple dashboard or a complex enterprise application, this library provides the building blocks you need to create stunning and functional user interfaces.

📦 Components

| Component | Description | Key Features | |:---|:---|:---| | Accordion | Expandable content sections for organizing large amounts of information. | • Allow multiple open• Default expanded state• Smooth animations• Accessible (WAI-ARIA) | | Alert | standard feedback messages for user actions and system states. | • 4 Semantic variants (Info, Success, Warning, Error)• Dismissible• Custom icons• Title support | | Avatar | visual representation of a user or entity. | • Image, text (initials), or icon fallback• Status indicators (online, busy, etc.)• Multiple sizes and shapes | | Badge | Small status indicators for numbers or text labels. | • Semantic color variants• Pill and rounded shapes• Counter visualization• Outlined mode | | Breadcrumb | Navigation aid showing page hierarchy. | • Custom separators• Truncation support• Clickable items• Accessible navigation | | Button | Standardized, theme-aware interactive buttons. | • 9 Variants (Primary, Ghost, Danger, etc.)• 3 Sizes• Loading states• Icon support (start/end) | | Card | Flexible content containers for organizing related information. | • Header, Body, Footer, and Image subcomponents• 3 Variants (Elevated, Outlined, Filled)• Interactive states | | Checkbox | Selection control for boolean values. | • Indeterminate state support• Error states• Custom SVG icons• Keyboard accessible | | DataTable | Feature-rich component for displaying and interacting with tabular data. | • Sortable columns• Pagination and page size control• Row selection (single/multi)• Mobile responsive (card view) | | Drawer | Side panel overlay for navigation or actions. | • Left/Right/Top/Bottom placement• Backdrop options• Smooth transitions• Focus management | | DynamicForm | Powerful engine to build complex forms from JSON configurations. | • 30+ Field presets• Auto-translation (i18n)• Sync/Async validation• Conditional logic & dependencies | | Input | Enhanced text input fields for data entry. | • Validation states (error, success)• Leading and trailing icons• Helper text• Accessible labels | | Modal | Dialogs, popups, and actionable overlays. | • 4 Sizes (Small to Fullscreen)• Focus trapping• Portal rendering• Keyboard navigation (Esc to close) | | ProgressBar | Visual indicator of operation progress. | • Deterministic & Indeterminate• Label support• Striped/Animated variants• Custom colors | | Section | Container for grouping content with headers. | • Collapsible support• Custom titles• Styling support• Default expanded state | | Select | Customizable dropdown menus for option selection. | • Single and multiple selection• Searchable options• Custom option rendering• Form integration | | Skeleton | Placeholder loading state for content. | • Text, Circular, Rectangular variants• Pulse/Wave animations• Responsive sizing• Theme aware | | Spinner | Visual indicators for loading states. | • Multiple sizes• Color variants• Lightweight implementation | | Switch | Toggle control for binary states. | • Controlled/Uncontrolled• With icons/labels• Sizes (Small/Medium/Large)• Disabled state | | Tabs | Content organization into flexible, switchable sections. | • 4 Visual variants• Controlled & Uncontrolled modes• Keyboard navigation• Disabled states | | Toast | Brief, non-blocking notification messages. | • Auto-dismiss with configurable duration• Global useToast hook• 4 Semantic variants• Positioning options | | Tooltip | Contextual information displayed on hover or focus. | • 4 Positioning options• Custom delays• Rich content support• Keyboard accessible |

📖 Browse all documentation

✨ Features

• 🎨 Theme System: 4 pre-built themes (default, minimal, modern, compact)
• 🌍 Internationalization: Full i18n support (English, Portuguese)
• ✅ TypeScript First: Full type safety and IntelliSense support
• ♿ Accessible: WCAG 2.1 compliant components
• 🚀 Modern Stack: Built with React 18+, Vite, and Vitest

🚀 Quick Start

Installation

npm install @mabesi/react-components

Basic Usage

import { DynamicForm, DataTable, ThemeProvider, I18nProvider } from '@mabesi/react-components';

function App() {
  return (
    <ThemeProvider defaultTheme="modern">
      <I18nProvider defaultLocale="en">
        {/* Your components here */}
      </I18nProvider>
    </ThemeProvider>
  );
}

📚 Documentation

Detailed documentation for each component is available in the docs directory.

🎨 Themes

Switch between 4 pre-built themes:

import { ThemeProvider, useTheme } from '@mabesi/react-components';

function ThemeSwitcher() {
  const { themeName, setTheme } = useTheme();
  
  return (
    <select value={themeName} onChange={(e) => setTheme(e.target.value)}>
      <option value="default">Default</option>
      <option value="minimal">Minimal</option>
      <option value="modern">Modern</option>
      <option value="compact">Compact</option>
    </select>
  );
}

Available Themes:

• default - Bootstrap-inspired styling
• minimal - Clean design, no shadows
• modern - Rounded corners, vibrant colors
• compact - Dense layout, reduced spacing

🌍 Internationalization

Switch languages dynamically:

import { I18nProvider, useI18n } from '@mabesi/react-components';

function LanguageSwitcher() {
  const { locale, setLocale } = useI18n();
  
  return (
    <button onClick={() => setLocale(locale === 'en' ? 'pt-BR' : 'en')}>
      {locale === 'en' ? 'Switch to Portuguese' : 'Mudar para Inglês'}
    </button>
  );
}

Supported Languages:

• English (en)
• Portuguese (Brazil) (pt-BR)

🎯 Examples

Explore the live components in our example application:

👉 Live Demo: https://mabesi.github.io/react-components/

The examples source code is available in the examples folder. Use it to see usage patterns and implementation details for every component.

To run examples locally:

cd examples
npm install
npm run dev
# Open: http://localhost:3000/ (or the port shown in terminal)

🛠️ Development

Prerequisites

• Node.js >= 18
• React >= 18

Building

npm run build

Testing

npm test

👥 Authors & Contributors

| Plinio Mabesi | | :---: |

📄 License

This project is licensed under the MIT License.

⚠️ Legal Disclaimer

🙏 Acknowledgements

Thanks to all these amazing tools that make modern web development possible:

• React
• TypeScript
• Vite
• Vitest

Built with ❤️ by Plinio Mabesi