{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expanding-contact-button",
  "title": "Expanding Contact Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/expanding-contact-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function ExpandingContactButton() {\n  return (\n    <button className=\"group relative inline-flex h-9 w-9 items-center overflow-hidden rounded-full border-0 bg-transparent p-0 text-[13px] font-medium leading-none text-[light-dark(#14181e,#f0f0f0)] transition-[width,background-color,color] duration-[320ms] ease-[cubic-bezier(.4,0,.2,1)] hover:w-[145px] hover:bg-[light-dark(#14181e,#f4f4f5)] hover:text-[light-dark(#f6f7f9,#111)] focus-visible:w-[145px] focus-visible:bg-[light-dark(#14181e,#f4f4f5)] focus-visible:text-[light-dark(#f6f7f9,#111)]\">\n      <span className=\"relative z-10 grid size-9 shrink-0 place-items-center rounded-full bg-[#f97316] text-[light-dark(#f6f7f9,#111)]\">\n        <ArrowRight size={18} strokeWidth={2.5} />\n      </span>\n      <span className=\"absolute left-[47px] whitespace-nowrap opacity-0 -translate-x-[5px] transition-[opacity,transform] duration-[240ms] delay-[60ms] group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:translate-x-0 group-focus-visible:opacity-100\">\n        Get in touch\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/expanding-contact-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/expanding-contact-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}