Accordion Image Sync

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/feature40.tsx instead.

Usage

The file also exports feature40Demo, 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 { Feature40, feature40Demo } from "@/components/blocks/feature/feature40";

export default function Page() {
  return <Feature40 {...feature40Demo} />;
}

Props

Types

type AccordionFeatureItem = {
  title: string;
  description: string;
  image: { src: string; alt: string };
};

Behavior notes

• Real client-side state: clicking an accordion header sets it as the active item via useState; opening one item closes whichever was previously open, so exactly one item is expanded at a time.
• Real image sync: the right-hand panel swaps to the active item's image the moment a header is clicked, driven by the same state as the accordion.
• "use client" component, so its demo props live in the sibling feature40.demo.tsx file per this repo's client/demo-file-split rule, not in feature40.tsx itself.
• The first item is expanded, and its image shown, by default on mount.
• The image panel uses `lg:sticky lg:top-24` so it stays in view alongside the accordion while scrolling on larger screens; it is not sticky on mobile where the layout stacks.
• aria-expanded and aria-controls wire each accordion header to its panel for screen readers.