{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "next-reveal-button",
  "title": "Next Reveal Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "An outlined arrow control that expands into a bright Next button on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/next-reveal-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function NextRevealButton() {\n  return (\n    <button className=\"group relative inline-flex h-[42px] w-[110px] items-center justify-end overflow-hidden rounded-full border border-[light-dark(#14181e33,#f0f0f033)] bg-[light-dark(#ffffff,#171717)] px-[15px] text-[light-dark(#14181e,#f0f0f0)] transition-[background-color,border-color,color] duration-300 ease-[cubic-bezier(.16,1,.3,1)] hover:border-transparent hover:bg-[#f97316] hover:text-[light-dark(#f0f2f5,#171d1a)] focus-visible:border-transparent focus-visible:bg-[#f97316] focus-visible:text-[light-dark(#f0f2f5,#171d1a)]\">\n      <span className=\"absolute left-[21px] translate-y-[160%] text-base font-normal opacity-0 transition-[opacity,transform] duration-300 ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100\">\n        Next\n      </span>\n      <ArrowRight className=\"relative z-10 shrink-0\" size={27} strokeWidth={1.7} />\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/next-reveal-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/next-reveal-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}