Plus Icon Accordion

plus x rotate

Accordion with animated plus/minus icon rotation. From Bundui.

accordioniconrotatebundui

Content for product information goes here with smooth height animation.

Code

accordion-plus.tsx

"use client";
import { useState } from "react";

export function PlusAccordion({ items }: { items: string[] }) {
  const [open, setOpen] = useState<number | null>(null);
  return (
    <div className="space-y-2">
      {items.map((title, i) => (
        <div key={i} className="rounded-lg border border-border">
          <button onClick={() => setOpen(open === i ? null : i)}
            className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium">
            <span>{title}</span>
            <span className={`text-lg transition-transform duration-300 ${open === i ? "rotate-45" : ""}`}>+</span>
          </button>
          {open === i && <div className="px-4 pb-3 text-sm text-muted-foreground">Content for {title.toLowerCase()}.</div>}
        </div>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Plus Icon Accordion component and wire it to my accent.”