Photo Stack

A PhotoStack renders a vertical deck of photo cards. It allows dragging or tapping the top card to move it to the back, revealing the next. Use it to display a series of images in a interactive, swipeable format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/photo-stack

npx layro-cli add @educlopez/photo-stack

npx layro-cli add @educlopez/photo-stack

bunx layro-cli add @educlopez/photo-stack

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useRef, useState } from "react";

export interface PhotoStackPhoto {
  alt: string;
  id: string;
  /** Optional caption shown over the front card. */
  name?: string;
  role?: string;
  src: string;
}