Mantine Reflection Component

Overview

This component is created on top of the Mantine library.

Mantine Reflection provides a simple wrapper—Reflection—that adds a mirrored version of its children, enabling polished visual effects for images and components within Mantine‑based interfaces. Developers can tune reflection characteristics including distance from the source, opacity, blur level, stretch, and gradient start/end to achieve subtle or pronounced looks. It also includes comprehensive shadow controls (offset, opacity, blur, size, scale X/Y, and color) to complement the reflection for more realistic depth.

The package ships global styles via styles.css and a layer‑scoped variant via styles.layer.css for integration with CSS @layer mantine-reflection. When reflecting images, setting display: block on img prevents baseline padding artifacts. A dedicated reflectionBlur prop adds pixel‑based blur to the reflection, with guidance to use small values or padding to avoid edge clipping. Overall, the component is designed to be drop‑in, flexible, and precise for creating refined mirror and shadow effects around arbitrary React children.

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://source.unsplash.com/9QmbsTDAI4g/150x150"
      />
    </Reflection>
  );
}

---