Mantine Led Component

---

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Overview

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.

Features

• 🎨 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

Note

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

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';

Usage

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

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

Sponsor

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

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.