{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-122",
  "type": "registry:component",
  "dependencies": [
    "@remixicon/react"
  ],
  "registryDependencies": [
    "https://coss.com/origin/r/button.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-122.tsx",
      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button className=\"bg-[#DB4437] text-white after:flex-1 hover:bg-[#DB4437]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGoogleFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with Google\n      </Button>\n      <Button className=\"bg-[#14171a] text-white after:flex-1 hover:bg-[#14171a]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiTwitterXFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with X\n      </Button>\n      <Button className=\"bg-[#1877f2] text-white after:flex-1 hover:bg-[#1877f2]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiFacebookFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with Facebook\n      </Button>\n      <Button className=\"bg-[#333333] text-white after:flex-1 hover:bg-[#333333]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGithubFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with GitHub\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "style": 2,
    "tags": [
      "button",
      "social",
      "login",
      "authentication"
    ]
  }
}