Documentation

Collapsible

Expandable and collapsible content with smooth animations.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

"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.