Collapsible

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>

<Collapsible defaultOpen>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content visible by default.</CollapsibleContent>
</Collapsible>

const [open, setOpen] = React.useState(false)
 
<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Controlled content.</CollapsibleContent>
</Collapsible>

npx shadcn@latest add https://solar-ui.com/r/collapsible.json

npm install @radix-ui/react-collapsible

"use client"
 
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
const Collapsible = CollapsiblePrimitive.Root
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 
export { Collapsible, CollapsibleTrigger, CollapsibleContent }