Expandable Accordion Cards with Image

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

Usage

The file also exports feature100Demo, 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 { Feature100, feature100Demo } from "@/components/blocks/feature/feature100";

export default function Page() {
  return <Feature100 {...feature100Demo} />;
}

Props

Types

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

Behavior notes

• Real client-side state: clicking a card's header toggles it via useState<number | null>; opening a card closes whichever was previously open, and clicking the already-open card's header closes it, so at most one card is expanded at a time.
• "use client" component, so its demo props live in the sibling feature100.demo.tsx file per this repo's client/demo-file-split rule, not in feature100.tsx itself.
• The expand/collapse animation is a real CSS transition on `grid-template-rows` (0fr closed, 1fr open) applied via an inline style keyed off the open state, combined with `overflow-hidden` on the inner wrapper, rather than a display toggle or a fixed max-height hack.
• The first card is expanded, revealing its description and image, by default on mount.
• aria-expanded and aria-controls wire each card header to its panel for screen readers.