Underline Accordion

An animated accordion set where each opened item reveals a sweeping underline beneath its header, with five decorative line styles (sweep, center, grow, double, dashed).

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

import AccordionUnderline from "@/components/ui/accordion-underline";

export default function AccordionUnderlineDemo() {
  return (
    <div className="w-full max-w-md mx-auto">
      <AccordionUnderline />
    </div>
  );
}