An animated collapsible disclosure built on Base UI primitives with spring-based height, icon, and content transitions for FAQs and expandable sections.
"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>
);
}