Collapsible (Base UI)

Component

About

An animated collapsible disclosure built on Base UI primitives with spring-based height, icon, and content transitions for FAQs and expandable sections.

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

Code

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

Usage.tsx

"use client";

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

export default function CollapsibleDemo() {
  return (
    <div className="mx-auto w-full max-w-md px-6 py-12">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>
          What is included in the free plan?
        </CollapsibleTrigger>
        <CollapsibleContent>
          <p>
            The free plan includes unlimited public projects, community support,
            and access to every core component.
          </p>
          <p>
            Upgrade at any time to unlock private projects and priority support.
          </p>
        </CollapsibleContent>
      </Collapsible>
      <Collapsible>
        <CollapsibleTrigger>Can I cancel anytime?</CollapsibleTrigger>
        <CollapsibleContent>
          <p>
            Yes. Cancel your subscription whenever you like — no questions
            asked.
          </p>
        </CollapsibleContent>
      </Collapsible>
      <Collapsible>
        <CollapsibleTrigger>Do you offer team accounts?</CollapsibleTrigger>
        <CollapsibleContent>
          <p>
            Team plans add shared workspaces, role-based access, and centralized
            billing for your whole organization.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}