{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "preview-browser-button",
  "title": "Preview in Browser Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "An outlined pill button with a diagonal arrow that slides through on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/preview-browser-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function PreviewInBrowserButton() {\n  return (\n    <button className=\"group inline-flex items-center justify-center gap-2 rounded-full border border-[light-dark(#14181e,#f0f0f0)] bg-transparent px-6 py-3 text-base font-medium text-[light-dark(#14181e,#f0f0f0)]\">\n      <span>Preview in browser</span>\n      <span className=\"relative grid h-5 w-[17px] place-items-center overflow-hidden\">\n        <ArrowRight className=\"absolute rotate-[-45deg] transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-4 group-hover:-translate-y-3\" size={17} strokeWidth={2.4} />\n        <ArrowRight className=\"absolute -translate-x-4 translate-y-3 rotate-[-45deg] transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-0 group-hover:translate-y-0\" size={17} strokeWidth={2.4} />\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/preview-browser-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/preview-browser-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}