Accordion Feature Checklist

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

Usage

The file also exports feature119Demo, 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 { Feature119, feature119Demo } from "@/components/blocks/feature/feature119";

export default function Page() {
  return <Feature119 {...feature119Demo} />;
}

Props

Types

interface Feature119Category {
  title: string;
  description?: string;
  features: string[];
}

Behavior notes

• Real client-side state: clicking a category header sets it as the open category via useState; opening one category closes whichever was previously open, so at most one category is expanded at a time (single-open accordion, not independently toggleable).
• Clicking the currently-open category's header again collapses it, leaving all categories closed, it is not a fixed radio group that always keeps exactly one open.
• The first category is expanded by default on mount (initial useState value, not derived in an effect).
• "use client" component, so its demo props live in the sibling feature119.demo.tsx file per this repo's client/demo-file-split rule, not in feature119.tsx itself.
• aria-expanded and aria-controls wire each accordion header to its panel for screen readers; the checkmark icons are decorative (aria-hidden) since the feature text itself already conveys the list.