{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-01",
  "title": "Basic",
  "description": "Canonical starred-repos toggle with a chevron trigger.",
  "dependencies": [],
  "registryDependencies": [
    "collapsible",
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/collapsible/collapsible-01.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible'\nimport { ChevronsUpDownIcon } from 'lucide-react'\n\nconst repos = ['@radix-ui/primitives', '@radix-ui/colors', '@stitches/react']\n\nexport function Collapsible01() {\n  return (\n    <Collapsible defaultOpen className=\"w-full max-w-sm space-y-2\">\n      <div className=\"flex items-center justify-between gap-4 px-1\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger\n          render={\n            <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Toggle repos\">\n              <ChevronsUpDownIcon />\n            </Button>\n          }\n        />\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n        {repos[0]}\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        {repos.slice(1).map((repo) => (\n          <div\n            key={repo}\n            className=\"rounded-md border px-4 py-2 font-mono text-sm\"\n          >\n            {repo}\n          </div>\n        ))}\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/collapsible/collapsible-01.tsx"
    }
  ],
  "type": "registry:block"
}