Feature with Image Carousel and Lightbox Modal

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/feature/feature63.tsx instead.

Usage

The file also exports feature63Demo, 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 { Feature63, feature63Demo } from "@/components/blocks/feature/feature63";

export default function Page() {
  return <Feature63 {...feature63Demo} />;
}

Props

Types

type CarouselItem = {
  image: MediaSlotImage;
  caption?: string;
};

Behavior notes

• Real client-side state: the carousel is a native horizontally-scrolling, scroll-snapped track; the prev/next arrows scroll it by exactly one item's width, and the dots scroll directly to a given item.
• The active dot is derived from the track's scroll position via a real onScroll handler that finds the item closest to the current scroll offset, so it stays in sync with manual swiping as well as the arrow buttons.
• Clicking any carousel item opens a fixed-position modal lightbox at that item's index with its own close, previous, and next controls; Escape closes it and the left/right arrow keys navigate it, wired via a real keydown listener while it is open.
• The carousel item width is `w-full` on mobile, `sm:w-1/2` on tablet, and `lg:w-1/3` on desktop, matching one, two, and three visible items respectively.
• The lightbox is a plain fixed-position overlay (no portal library), rendered conditionally in the same component tree.