Depth Select

A 3D stack select component inspired by macOS Time Machine for React applications built with Mantine. Navigate through stacked cards with perspective transforms and smooth transitions.

Installation

yarn add @gfazioli/mantine-depth-select

Overview

DepthSelect provides a 3D stacked card selection interface:

• 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
• Compound Components — use DepthSelect.Controls as children for customization
• Accessibility — WAI-ARIA listbox pattern with proper roles and labels
• Styles API — extensive styling customization with classNames prop