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

Mantine Reflection adds a mirrored reflection effect to any React component or image.

Features

• 🪞 Reflection effect: Mirror any React children with configurable opacity, blur, stretch, and gradient fade
• 🎨 Shadow system: Independent shadow controls (offset, opacity, blur, color, scaleX/Y, size)
• 🌗 Dark mode shadow: shadowColor="auto" for automatic light/dark theme adaptation via CSS light-dark()
• 📱 Responsive: reflectionDistance, reflectionOpacity, reflectionBlur, and shadowSize support Mantine breakpoint objects via CSS media queries (no React re-renders)
• 🌊 Water ripple effect: Animated water distortion via SVG filters (ripple, rippleStrength, rippleFrequency, rippleSpeed, rippleOctaves, rippleSeed)
• 🔍 Blur without clipping: reflectionBlur automatically adds padding to prevent edge artifacts
• 🔒 Disable children: Prevent interaction in the reflected copy with disableChildren
• ♿ Accessible: aria-hidden, non-focusable, prefers-reduced-motion support
• 🎨 Styles API: Full Mantine Styles API support
• 📦 TypeScript: Full type safety out of the box

[!note]

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-reflection

or

yarn add @gfazioli/mantine-reflection

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

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

Usage

import { Reflection } from '@gfazioli/mantine-reflection';

function Demo() {
  return (
    <Reflection>
      <img
        width={150}
        style={{ display: 'block', borderRadius: '50%' }}
        alt="test"
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png"
      />
    </Reflection>
  );
}

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.