Accordion

Component 3

About

Here is Accordion component

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

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import { Accordion } from "@/components/ui/accordion-1";

function AccordionExample() {
  return (
    <Accordion
      trigger={
        <div className="flex w-full items-center gap-2 px-3 py-2">
          <span className="grow shrink-0 basis-0 text-body font-body text-default-font">
            Accordion header
          </span>
          <Accordion.Chevron />
        </div>
      }
      defaultOpen={false}
    >
      <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-2 px-3 py-2">
        <span className="text-body font-body text-default-font">
          Accordion contents
        </span>
      </div>
    </Accordion>
  );
}

export default AccordionExample;