Minimal Plus-Minus

Installation

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

Usage

The file also exports faq34Demo, 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 { Faq34, faq34Demo } from "@/components/blocks/faq/faq34";

export default function Page() {
  return <Faq34 {...faq34Demo} />;
}

Props

Behavior notes

• Real client-side accordion state: clicking a question's button toggles real open/closed state and swaps the Plus/Minus icon, only one row is expanded at a time, expanding a new row collapses whichever was previously open.
• Each question is a genuine <button type="button"> with aria-expanded and aria-controls wired to the answer panel's id, and the panel carries role="region" with aria-labelledby back to the button.
• Demo props live in a separate faq34.demo.tsx file (no "use client") since this is a client component, per the repo's block-preview prop-passing convention.