Collapsible (Radix UI)

Component 6

About

An animated collapsible disclosure built on Radix UI primitives, with spring height, chevron, and fade transitions plus reduced-motion support for FAQs and expandable panels.

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

Code

How Collapsible (Radix UI) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/r-collapsible";

export default function CollapsibleDemo() {
  return (
    <div className="mx-auto w-full max-w-md px-4 py-10">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>What is your refund policy?</CollapsibleTrigger>
        <CollapsibleContent>
          <p>
            If you&apos;re not satisfied with your purchase, we offer a 30-day
            money-back guarantee. Just reach out to our support team and
            we&apos;ll take care of the rest.
          </p>
        </CollapsibleContent>
      </Collapsible>
      <Collapsible>
        <CollapsibleTrigger>Do you offer technical support?</CollapsibleTrigger>
        <CollapsibleContent>
          <p>
            Yes. Every plan includes email support, and paid plans add priority
            chat support with a dedicated response time.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}