This component is created on top of the Mantine library. It requires Mantine 9.x and React 19.

The Mantine Led component is a highly customizable LED indicator for React applications built with Mantine. It provides visual feedback for status indicators, notifications, and interactive elements with support for various colors, sizes, animations, and states.

• 🎨 Theme Integration: Full Mantine theme support with all theme colors
• 📐 Flexible Sizing: Supports all Mantine sizes plus custom values
• 📱 Responsive Props: Led.Matrix supports responsive cols and gap via Mantine breakpoint objects (e.g. { base: 4, md: 8 })
• ✨ Rich Animations: Multiple animation types (pulse, flash, breathe, blink, glow)
• 🎭 Visual Variants: Flat and 3D rendering styles
• 🏷️ Label Support: Optional labels with configurable positioning
• 🎛️ Controlled State: Full control over the LED on/off state
• ♿ Accessibility: Follows WAI-ARIA best practices
• 🎨 Styles API: Extensive styling customization support
• 📦 TypeScript: Full type safety out of the box

npm install @gfazioli/mantine-led

or

yarn add @gfazioli/mantine-led

After installation import package styles at the root of your application:

import '@gfazioli/mantine-led/styles.css';

import { Led } from '@gfazioli/mantine-led';

function Demo() {
  return  <Led />;
}

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.