Collapsible

Cards 1

About

A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log output. Controlled or uncontrolled via open / defaultOpen, with data-panel-open styling hooks. Ships Collapsible, CollapsibleTrigger and CollapsiblePanel (also exported as CollapsibleContent).

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

Code

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

Usage.tsx

import { ChevronDownIcon } from "lucide-react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/cnippet-collapsible";

export default function CollapsibleCard() {
  return (
    <div className="w-full max-w-xs">
      <div className="rounded-xl border bg-card px-3 py-4 text-card-foreground shadow-sm">
        <Collapsible>
          <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4 text-sm">
            <span>How do I reset my password?</span>
            <ChevronDownIcon
              aria-hidden="true"
              className="size-4 shrink-0 in-data-panel-open:rotate-180 text-muted-foreground transition-transform"
            />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="pt-3 text-muted-foreground text-sm">
              You can reset your password by clicking the &quot;Forgot
              Password&quot; link on the login page. We&apos;ll send you an email
              with instructions to create a new password.
            </div>
          </CollapsibleContent>
        </Collapsible>
      </div>
    </div>
  );
}