Depth rail
A spatial card rail where the next card recedes into depth and drag or keys advance the stack.
Surface studies
Seven material studies on one spatial rail. Drag the stack or focus it and use the arrow keys.
Slide 1 of 7Chalk
Drag horizontally, or focus the rail and use the arrow keys.
ChalkA matte field with a soft chalk edge. Printed on uncoated stock.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type KeyboardEvent,11 type PointerEvent,12 type ReactNode,13} from "react";14import { ChevronLeft, ChevronRight } from "lucide-react";15 16export type DepthRailItem = {17 id: string;18 /** Accessible name for this card. */19 label: string;20 /** Card artwork or content. Keep it presentational; the rail owns navigation. */21 content: ReactNode;22};23 24export type DepthRailProps = Omit<25 HTMLAttributes<HTMLDivElement>,26 "children" | "onChange"27> & {28 /** Cards in rail order. */