Components
Collapsible
An expandable container for hiding content.
Collapsible is built on the Base UI Collapsible primitive. It toggles the visibility of content with animated transitions.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/collapsible.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export default function Example() {
return (
<Collapsible>
<CollapsibleTrigger render={<Button variant="outline">Toggle</Button>} />
<CollapsibleContent>Hidden content.</CollapsibleContent>
</Collapsible>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Collapsibledata-slot="collapsible" | Collapsible.RootBase UI | — |
CollapsibleTriggerdata-slot="collapsible-trigger" | Collapsible.TriggerBase UI | — |
CollapsibleContentdata-slot="collapsible-content" | Collapsible.PanelBase UI | — |
Last updated on