{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-underline-button",
  "title": "Gradient Underline Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A label that scales up as a warm gradient underline grows across it.",
  "files": [
    {
      "path": "registry/microkit/gradient-underline-button.tsx",
      "content": "export function GradientUnderlineButton() {\n  return (\n    <button\n      type=\"button\"\n      className=\"group relative inline-flex cursor-pointer appearance-none flex-col items-center justify-center overflow-hidden border-0 bg-transparent px-6 py-2 text-center text-[light-dark(#14181e,#f0f0f0)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\"\n    >\n      <span className=\"relative z-10 text-base font-medium transition-transform duration-500 group-hover:scale-[1.2] group-focus-visible:scale-[1.2]\">HOVER ME</span>\n      <span className=\"absolute bottom-0 left-0 h-px w-0 bg-[linear-gradient(90deg,transparent_0%,rgba(249,115,22,.35)_30%,#f97316_50%,rgba(249,115,22,.35)_70%,transparent_100%)] transition-[width] duration-1000 ease-[cubic-bezier(.165,.84,.44,1)] group-hover:w-full group-focus-visible:w-full\" aria-hidden=\"true\" />\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/gradient-underline-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/gradient-underline-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}