Collapsible

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"
import { ChevronsUpDown } from "lucide-react"

<Collapsible>
  <div className="flex items-center justify-between">
    <h4 className="text-sm font-semibold">Advanced Settings</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="sm">
        <ChevronsUpDown className="h-4 w-4" />
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent>
    <div className="rounded-md border px-4 py-2 text-sm mt-2">
      Content that can be expanded or collapsed.
    </div>
  </CollapsibleContent>
</Collapsible>

npx shadcn add @bonsai/collapsible