https://github.com/gfazioli/mantine-lens-select
A fisheye/lens magnification select component for React built with Mantine. Supports count mode, min/max/step range, macOS Dock-like magnification, horizontal/vertical orientations.
https://github.com/gfazioli/mantine-lens-select
component count dock extension fisheye lens macos-dock magnification mantine mantine-ui mantine-v9 range react react-component select slider typescript
Last synced: about 1 month ago
JSON representation
A fisheye/lens magnification select component for React built with Mantine. Supports count mode, min/max/step range, macOS Dock-like magnification, horizontal/vertical orientations.
- Host: GitHub
- URL: https://github.com/gfazioli/mantine-lens-select
- Owner: gfazioli
- License: mit
- Created: 2026-03-28T11:28:55.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-05-12T14:41:11.000Z (about 2 months ago)
- Last Synced: 2026-05-12T16:35:20.380Z (about 2 months ago)
- Topics: component, count, dock, extension, fisheye, lens, macos-dock, magnification, mantine, mantine-ui, mantine-v9, range, react, react-component, select, slider, typescript
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-lens-select/
- Size: 8.81 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Mantine Lens Select Component
[](https://www.npmjs.com/package/@gfazioli/mantine-lens-select)
[](https://www.npmjs.com/package/@gfazioli/mantine-lens-select)
[](https://www.npmjs.com/package/@gfazioli/mantine-lens-select)
---
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
The [Mantine Lens Select](https://gfazioli.github.io/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**: `` — 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](https://gfazioli.github.io/mantine-lens-select/) | [More Mantine Components](https://mantine-extensions.vercel.app/)
## Installation
```sh
npm install @gfazioli/mantine-lens-select
```
or
```sh
yarn add @gfazioli/mantine-lens-select
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-lens-select/styles.css';
```
## Usage
### Simple count mode
```tsx
import { LensSelect } from '@gfazioli/mantine-lens-select';
function Demo() {
return ;
}
```
### Range with step
```tsx
```
### Custom data
```tsx
import { LensSelect } from '@gfazioli/mantine-lens-select';
const data = [
{ value: 'home', view: 🏠 },
{ value: 'search', view: 🔍 },
{ value: 'mail', view: 📧 },
{ value: 'settings', view: ⚙️ },
];
function Demo() {
return ;
}
```
## Sponsor
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
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](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up-to-date, and growing for everyone.
---
[](https://www.star-history.com/#gfazioli/mantine-lens-select&Timeline)