Accordion

Component

About

An accessible, composable accordion for organizing related content into expandable sections, supporting controlled/uncontrolled state, disabled state, custom expand/collapse icons and a smooth height transition. Ported to React from the RockSolid SolidJS component library (MIT) by Darshan Rajadhyaksha.

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

import Accordion, {
  AccordionSummary,
  AccordionDetails,
} from "@/components/ui/accordion";

export default function AccordionDemo() {
  return (
    <div className="w-full max-w-md">
      <Accordion>
        <AccordionSummary>What is gravity?</AccordionSummary>
        <AccordionDetails>
          Gravity is a force that attracts objects with mass toward one another.
          On Earth, it gives objects weight and causes them to fall toward the
          ground.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary>What is photosynthesis?</AccordionSummary>
        <AccordionDetails>
          Photosynthesis is the process by which plants use sunlight, water, and
          carbon dioxide to produce energy in the form of glucose.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary>What is an atom?</AccordionSummary>
        <AccordionDetails>
          An atom is the smallest unit of an element that retains the chemical
          properties of that element. It consists of a nucleus surrounded by
          electrons.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}