Numbered Accordion

An accordion whose rows are prefixed with sequential step-number chips, useful for FAQs, onboarding steps or numbered feature lists that expand one at a time.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Numbered Accordion to your project and fits it to your theme.

import { CircleAccordion } from "@/components/ui/accordion-numbered";

export default function AccordionNumberedDemo() {
  return (
    <div className="w-full max-w-lg mx-auto">
      <CircleAccordion />
    </div>
  );
}