{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "read-more-swap",
  "title": "Read More Swap",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A text link whose arrow swaps from the right side to an orange leading arrow on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/read-more-swap.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function ReadMoreSwap() {\n  return (\n    <button className=\"group inline-flex h-12 items-center gap-3 overflow-hidden border-0 bg-transparent p-0 text-base font-medium text-[light-dark(#14181e,#f0f0f0)]\">\n      <ArrowRight className=\"w-0 shrink-0 translate-x-[-12px] text-[#f97316] opacity-0 transition-[width,transform,opacity] duration-[240ms] group-hover:w-[25px] group-hover:translate-x-0 group-hover:opacity-100\" size={25} strokeWidth={2.5} />\n      <span>Read more</span>\n      <ArrowRight className=\"w-[25px] shrink-0 transition-[width,transform,opacity] duration-[240ms] group-hover:w-0 group-hover:translate-x-3 group-hover:opacity-0\" size={25} strokeWidth={2.5} />\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/read-more-swap.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/read-more-swap",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}