{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "project-text-swap-button",
  "title": "Project Text Swap Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "An outlined pill whose duplicated label swaps vertically on hover.",
  "files": [
    {
      "path": "registry/microkit/project-text-swap-button.tsx",
      "content": "export function ProjectTextSwapButton() {\n  return (\n    <button\n      type=\"button\"\n      className=\"group relative inline-flex w-full max-w-44 cursor-pointer appearance-none box-border items-center justify-center overflow-hidden rounded-full border border-[light-dark(#14181e,#f0f0f0)] bg-transparent px-8 py-3 text-center text-[light-dark(#14181e,#f0f0f0)] [font-family:Arial,Helvetica,sans-serif] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\"\n    >\n      <span className=\"relative z-10 flex text-[16px] font-normal [line-height:normal] [transition:transform_.36s_cubic-bezier(.16,1,.3,1),opacity_.22s_ease] group-hover:-translate-y-[160%] group-hover:opacity-0 group-focus-visible:-translate-y-[160%] group-focus-visible:opacity-0\">Start a Project</span>\n      <span className=\"absolute z-10 flex translate-y-[160%] text-[16px] font-normal [line-height:normal] opacity-0 [transition:transform_.36s_cubic-bezier(.16,1,.3,1),opacity_.22s_ease] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100\" aria-hidden=\"true\">Start a Project</span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/project-text-swap-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/project-text-swap-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}