Installation & details
Staircase Image Carousel by Kedhareswer Naidu. Staircase image carousel for React: the selected photo sits level at full size with its title, earlier photos step up and later ones step down, and the strip glides between steps on a spring with a blurred title swap. Dark stage, keyboard arro
React · Tailwind CSS · Author permission · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/kedhareswer--staircase-carousel.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectStaircaseCarousel from '@/components/podie/kedhareswer--staircase-carousel/demo';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<EffectStaircaseCarousel />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
clsx, tailwind-merge The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Kedhareswer Naidu · Author permission. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
Present a short portfolio or travel photo sequence with the selected image level and neighboring images stepped above and below it. Arrow keys, Home/End, controls and horizontal swipes change the selection. The sequence stops at its ends rather than wrapping.
Integration boundary
Native React source. Provide items with meaningful alt text and a definite stage height. Use index/onIndexChange for controlled selection. onSelect runs when the already-selected slide is clicked; connect navigation separately.
Checks before shipping
The default stage fills the viewport. Check cropping and title size in your actual container, especially on phones. The source disables its transitions for reduced-motion preferences.
Recorded verification
Not included in the October 1 four-package-manager installation sample. This note records source inspection, not a new compatibility or device test. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: a39ac96450f5c4953a60defb3bf8ef602bc2e483dc8b86a5b1e8a8e626f352f7
Entry file: components/podie/kedhareswer--staircase-carousel/components/ui/staircase-carousel.tsx. 6 files in the registry payload.