Collapsible

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsiblePanel,
} from "@craftdotui/baseui/components/collapsible";

<Collapsible>
  <CollapsibleTrigger>Toggle Content</CollapsibleTrigger>
  <CollapsiblePanel>
    This content can be collapsed and expanded.
  </CollapsiblePanel>
</Collapsible>

<Collapsible>
  <CollapsibleTrigger>Show more</CollapsibleTrigger>
  <CollapsiblePanel>
    <p>Additional content that can be toggled.</p>
  </CollapsiblePanel>
</Collapsible>

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsiblePanel>
    Content
  </CollapsiblePanel>
</Collapsible>

<Collapsible defaultOpen>
  <CollapsibleTrigger>Details</CollapsibleTrigger>
  <CollapsiblePanel>
    This content is open by default.
  </CollapsiblePanel>
</Collapsible>