{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neon-invert-button",
  "title": "Neon Invert Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A bold orange CTA that inverts into a dark, softly glowing surface on hover.",
  "files": [
    {
      "path": "registry/microkit/neon-invert-button.tsx",
      "content": "export function NeonInvertButton() {\n  return (\n    <button\n      type=\"button\"\n      className=\"inline-flex min-h-[45px] w-[124px] max-w-full cursor-pointer appearance-none items-center justify-center rounded-[13px] border border-transparent bg-[#f97316] px-3.5 py-2.5 [font-family:Arial,Helvetica,sans-serif] text-[15px] font-medium leading-none text-[light-dark(#f0f2f5,#1d1d23)] transition-[background-color,border-color,color,box-shadow] duration-[450ms] ease-[cubic-bezier(.16,1,.3,1)] hover:border-[#f9731680] hover:bg-[light-dark(#f0f2f5,#1d1d23)] hover:text-[#f97316] hover:shadow-[inset_0_0_10px_2px_#f9731680] focus-visible:border-[#f9731680] focus-visible:bg-[light-dark(#f0f2f5,#1d1d23)] focus-visible:text-[#f97316] focus-visible:shadow-[inset_0_0_10px_2px_#f9731680] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[5px] focus-visible:outline-[#f97316]\"\n    >\n      Get Started\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/neon-invert-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/neon-invert-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}