Mantine Lens Select 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.

The Mantine Lens Select component is a fisheye/lens magnification select for React applications built with Mantine. It displays a list of items with a macOS Dock-like magnification effect on hover, where items near the cursor scale up creating an interactive and visually engaging selection experience.

Features

• Fisheye/lens magnification effect on hover (macOS Dock-like)
• Count mode: <LensSelect count={15} /> — no data array needed
• Range mode: min/max/step props (like Mantine Slider)
• Horizontal and vertical orientation support
• Configurable magnification, lens range, scale, opacity, and blur effects
• Controlled and uncontrolled modes via value/defaultValue/onChange
• Keyboard navigation (Arrow keys, Home, End) with optional loop
• Mouse wheel and touch/swipe navigation
• Custom item rendering via renderItem callback
• LensSelect.Indicator compound component for selection indicator
• Full Mantine Styles API support
• WAI-ARIA listbox pattern for accessibility
• GPU-optimized with targeted will-change
• TypeScript — full type safety out of the box

[!note]

Demo and Documentation | More Mantine Components

Installation

npm install @gfazioli/mantine-lens-select

or

yarn add @gfazioli/mantine-lens-select

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

import '@gfazioli/mantine-lens-select/styles.css';

Usage

Simple count mode

import { LensSelect } from '@gfazioli/mantine-lens-select';

function Demo() {
  return <LensSelect count={20} />;
}

Range with step

<LensSelect min={0} max={100} step={10} withIndicator />

Custom data

import { LensSelect } from '@gfazioli/mantine-lens-select';

const data = [
  { value: 'home', view: <span>🏠</span> },
  { value: 'search', view: <span>🔍</span> },
  { value: 'mail', view: <span>📧</span> },
  { value: 'settings', view: <span>⚙️</span> },
];

function Demo() {
  return <LensSelect data={data} withIndicator />;
}

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.