Collapse

Component

About

A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

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

Code

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

Usage.tsx

import { CollapseGroup, Collapse } from "@/components/ui/collapse-1";

export default function DefaultDemo() {
  return (
    <div className="w-3/4">
        <CollapseGroup>
          <Collapse title="Question A">
            <div className="mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
              minim veniam, quis nostrud exercitation ullamco laboris nisi ut
              aliquip ex ea commodo consequat.
            </div>
          </Collapse>
          <Collapse title="Question B">
            <div className="mb-4">
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur.
            </div>
          </Collapse>
        </CollapseGroup>
    </div>
  );
}