{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:component",
  "title": "Collapsible",
  "author": "Toby Belhome",
  "description": "Used to hide and show content with a smooth animation.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "collapsible"
  ],
  "files": [
    {
      "path": "examples/components/collapsible/01/page.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronsUpDown } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Collapsible open={isOpen} onOpenChange={setIsOpen} className=\"flex w-[350px] flex-col gap-2\">\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">@peduarte starred 3 repositories</h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">@radix-ui/primitives</div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">@radix-ui/colors</div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">@stitches/react</div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/collapsible.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}