import { InstallScript } from './components/InstallScript/InstallScript'; import * as demos from './demos';

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

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

You can import styles within a layer @layer mantine-depth-select by importing @gfazioli/mantine-depth-select/styles.layer.css file.

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

A 3D stack select component inspired by macOS Time Machine. Navigate through stacked cards with perspective transforms and smooth transitions. Use keyboard arrows, click the second card, mouse wheel, touch swipe, or use the built-in controls to navigate.

The controlsPosition prop controls where the navigation arrows are placed: right (default) or left. Set withControls={false} to hide the built-in controls and use your own.

You must set w and h props to define the area where cards live. Cards should use h="100%" to fill the available height.

Use value and onChange for controlled mode. Navigation also works via keyboard (ArrowUp/Down, Home/End), mouse wheel, and touch swipe:

By default, you can navigate the stack using the mouse wheel or trackpad gestures. The page scroll is automatically blocked while interacting with the component. Set withScrollNavigation={false} to disable this behavior.

Set loop to enable infinite navigation. When you reach the last item, the next navigation wraps back to the first item and vice versa:

Use controlsProps to customize the built-in controls. The justify prop aligns them vertically: start (top), center (default), or end (bottom). You can also set w for a fixed width to prevent layout shifts when labels change:

Set withControls={false} to hide the built-in navigation and use your own controls. Use value and onChange to manage navigation externally:

You can also use DepthSelect.Controls as a child component with withControls={false}. This gives you access to props like labelFormatter directly on the controls:

You can use any React content inside items. Here is an example with decorated cards featuring images, badges and buttons:

The depth stack creates a natural visual hierarchy, making the front card feel "recommended." Navigate between plans to compare features:

Browse through document versions with author info and change summaries. The depth effect naturally communicates "older = further back":

A step-by-step onboarding flow where completed steps move behind the current one. More engaging than a traditional linear stepper:

Items don't need to be cards — any React content works. This example uses emoji with varying widths to test how different-sized content behaves:

Browse through a collection of images with the depth stack. Enable loop for infinite scrolling. Each card uses Mantine's Image component with fit="cover":

DepthSelect supports Styles API, you can add styles to any inner element of the component with classNames prop.