Product Accordion Feature

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

Usage

The file also exports feature32Demo, 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 { Feature32, feature32Demo } from "@/components/blocks/feature/feature32";

export default function Page() {
  return <Feature32 {...feature32Demo} />;
}

Props

Types

type RecordRow = { label: string; value: string };

type CapabilityItem = { title: string; description: string };

Behavior notes

• Real interactivity: clicking a capability row toggles its answer panel open/closed via useState; only one panel is open at a time, matching the FAQ accordion pattern used elsewhere in this repo.
• "use client" component, so its demo props live in the sibling feature32.demo.tsx file per this repo's client/demo-file-split rule, not in feature32.tsx itself.
• Capability icons are a fixed, hardcoded array (Database, Zap, ShieldCheck, RefreshCw) indexed by array position, not a prop, since a component reference can never be passed as a prop into a client component.
• The floating records panel is a static decorative summary card, not live data; it is hidden below the sm breakpoint to avoid overlapping the image on small screens.