Documentation
Collapsible
Expandable and collapsible content with smooth animations.
Installation
pnpm add @rouf-dev/pantheon-uiUsage
"use client";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@rouf-dev/pantheon-ui";
import { Button } from "@rouf-dev/pantheon-ui";
import { useState } from "react";
export function CollapsibleDemo() {
const [isOpen, setIsOpen] = useState(false);
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild>
<Button variant="outline">Toggle Content</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="p-4">
This content can be expanded and collapsed.
</div>
</CollapsibleContent>
</Collapsible>
);
}Examples
Interactive examples require client-side state management. The Collapsible component provides controlled and uncontrolled modes for managing expand/collapse behavior.