Mantine Depth 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 Depth Select component is a 3D stack select inspired by macOS Time Machine for React applications built with Mantine. Navigate through stacked cards with perspective transforms and smooth transitions.

Features

• 🃏 3D Stack Effect: Cards stacked with perspective transforms (scale, translateY, opacity, blur)
• 🎛️ Controlled & Uncontrolled: Full control via value/onChange or automatic state management
• ⌨️ Keyboard Navigation: ArrowUp/Down, Home/End keys support
• 🖱️ Scroll Navigation: Mouse wheel and trackpad gesture support
• 📱 Touch Support: Swipe gestures for mobile devices
• 🔄 Loop Mode: Infinite navigation wrapping from last to first
• 🎮 Built-in Controls: Customizable arrow controls with positioning (right/left)
• 🧩 Compound Component: Use DepthSelect.Controls as children for full customization
• ♿ Accessibility: WAI-ARIA listbox pattern with proper roles and labels
• 🎨 Styles API: Extensive styling customization with classNames prop
• 📦 TypeScript: Full type safety out of the box

[!note]

→ Demo and Documentation → More Mantine Components

Installation

npm install @gfazioli/mantine-depth-select

or

yarn add @gfazioli/mantine-depth-select

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

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

Usage

import { Card, Text } from '@mantine/core';
import { DepthSelect, DepthSelectItem } from '@gfazioli/mantine-depth-select';

const data: DepthSelectItem[] = [
  { value: 'item-1', view: <Card p="lg" withBorder h="100%"><Text>Item 1</Text></Card> },
  { value: 'item-2', view: <Card p="lg" withBorder h="100%"><Text>Item 2</Text></Card> },
  { value: 'item-3', view: <Card p="lg" withBorder h="100%"><Text>Item 3</Text></Card> },
];

function Demo() {
  return <DepthSelect data={data} w={400} h={200} />;
}

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.