{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sliding-arrow-label",
  "title": "Sliding Arrow Label",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A text label that gets a bright surface while an arrow slides in beside it.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/sliding-arrow-label.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function SlidingArrowLabel() {\n  return <button type=\"button\" className=\"group relative inline-flex cursor-pointer items-center overflow-hidden border-0 bg-transparent py-0 pr-6 pl-0 text-[light-dark(#14181e,#f0f0f0)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\"><span className=\"rounded-lg px-3 py-1 text-base font-medium transition-colors duration-300 group-hover:bg-[#f97316] group-hover:text-[light-dark(#f6f7f9,#111)] group-focus-visible:bg-[#f97316] group-focus-visible:text-[light-dark(#f6f7f9,#111)]\">Create a blog</span><span className=\"absolute right-0 flex w-4 -translate-x-2.5 opacity-0 transition-[opacity,transform] duration-[350ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:translate-x-0 group-focus-visible:opacity-100\" aria-hidden=\"true\"><ArrowRight size={16} strokeWidth={2.4} /></span></button>;\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/sliding-arrow-label.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/sliding-arrow-label",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}