Expanding Proof Rows

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

Usage

The file also exports feature7Demo, 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 { Feature7, feature7Demo } from "@/components/blocks/feature/feature7";

export default function Page() {
  return <Feature7 {...feature7Demo} />;
}

Props

Types

type ProofRow = {
  title: string;
  summary: string;
  description: string;
  image?: { src: string; alt: string };
};

Behavior notes

• Real client-side state: clicking a row's header expands or collapses it, revealing its description and image; opening one row closes whichever row was previously open, so at most one row is expanded at a time.
• The first row (index 0) is expanded by default on mount.
• The plus icon rotates 45 degrees into an X when its row is open, purely as a CSS transition tied to the same state.
• Each row's leading icon comes from a fixed, hardcoded set indexed by row position rather than a per-row icon prop, since a "use client" component can't accept a component reference from a server parent.
• aria-expanded and aria-controls wire each header button to its panel for screen readers.