Plan Chest Sheet Stack

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/gallery/gallery1.tsx instead.

Usage

The file also exports gallery1Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Gallery1, gallery1Demo } from "@/components/blocks/gallery/gallery1";

export default function Page() {
  return <Gallery1 {...gallery1Demo} />;
}

Props

Types

type PlanChestSheet = {
  refNumber: string;
  title: string;
  medium: string;
  year: string;
  image: { src: string; alt: string };
};

Behavior notes

• Clicking a drawer row opens a real stack viewer: real client state (useState) holds the current front-to-back sheet order, rotated left one position at a time.
• "Next sheet" is a genuine array rotation, not a fake carousel: clicking it lifts the front sheet with a CSS transition (transform + opacity over 500ms), then, once that transition has had time to play, shifts it from the front of the order array to the back and re-renders the stack so the next sheet rises to the top.
• The peek of sheets stacked behind each drawer row is decorative (static offset panels), the real animated stack only exists inside the open viewer.
• The viewer closes on Escape or its close button; there is no backend involved anywhere in this block.