Expertise Accordion

Installation

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

Usage

The file also exports feature61Demo, 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 { Feature61, feature61Demo } from "@/components/blocks/feature/feature61";

export default function Page() {
  return <Feature61 {...feature61Demo} />;
}

Props

Types

type ExpertiseItem = {
  title: string;
  description: string;
  tags: string[];
  image: MediaSlotImage;
};

Behavior notes

• Real client-side state: clicking a column's header expands it (`flex-grow` animated via a CSS transition) and reveals its image, description, and tag pills; opening one column narrows whichever was previously open, so only one is expanded at a time.
• The first item (index 0) is expanded by default on mount.
• A collapsed column's title renders with `writing-mode: vertical-rl` (rotated 180 degrees) so it reads bottom-to-top as a vertical label; the open column's title switches to a normal horizontal heading.
• Each item's leading icon comes from a fixed, hardcoded set indexed by item position rather than a per-item 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.