{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "auth-button", "title": "Auth Button", "description": "A sign-in button for 16 providers with a soft tint of each brand's colors.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "registry/clover-ui/auth-button.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AuthProvider =\n | \"google\"\n | \"github\"\n | \"microsoft\"\n | \"discord\"\n | \"spotify\"\n | \"gitlab\"\n | \"linkedin\"\n | \"slack\"\n | \"twitch\"\n | \"notion\"\n | \"chatgpt\"\n | \"dropbox\"\n | \"apple\"\n | \"vercel\"\n | \"reddit\"\n | \"bitbucket\";\n\nexport interface AuthBrand {\n name: string;\n logo: string;\n mono?: boolean;\n colors?: string[];\n glow?: string;\n}\n\nexport type AuthButtonSize = \"sm\" | \"default\" | \"lg\";\nexport type AuthButtonIntent = \"signin\" | \"signup\";\n\nexport interface AuthButtonProps extends React.ComponentProps<\"button\"> {\n provider?: AuthProvider | AuthBrand;\n size?: AuthButtonSize;\n intent?: AuthButtonIntent;\n}\n\nconst svg = (source: string) => `data:image/svg+xml,${encodeURIComponent(source)}`;\n\nconst providerBrands: Record = {\n google: {\n name: \"Google\",\n glow: \"#4285F4\",\n colors: [\"#EA4335\", \"#FBBC05\", \"#34A853\", \"#4285F4\"],\n logo: svg(\n '',\n ),\n },\n github: {\n name: \"GitHub\",\n mono: true,\n logo: svg(\n '',\n ),\n },\n microsoft: {\n name: \"Microsoft\",\n glow: \"#00A4EF\",\n colors: [\"#F25022\", \"#7FBA00\", \"#00A4EF\", \"#FFB900\"],\n logo: svg(\n '',\n ),\n },\n discord: {\n name: \"Discord\",\n colors: [\"#5865F2\"],\n logo: svg(\n '',\n ),\n },\n spotify: {\n name: \"Spotify\",\n colors: [\"#1ED760\"],\n logo: svg(\n '',\n ),\n },\n gitlab: {\n name: \"GitLab\",\n colors: [\"#E24329\", \"#FC6D26\", \"#FCA326\"],\n logo: svg(\n '',\n ),\n },\n linkedin: {\n name: \"LinkedIn\",\n colors: [\"#0A66C2\"],\n logo: svg(\n '',\n ),\n },\n slack: {\n name: \"Slack\",\n glow: \"#E01E5A\",\n colors: [\"#36C5F0\", \"#2EB67D\", \"#ECB22E\", \"#E01E5A\"],\n logo: svg(\n '',\n ),\n },\n twitch: {\n name: \"Twitch\",\n colors: [\"#9146FF\"],\n logo: svg(\n '',\n ),\n },\n notion: {\n name: \"Notion\",\n logo: svg(\n '',\n ),\n },\n chatgpt: {\n name: \"ChatGPT\",\n mono: true,\n logo: svg(\n '',\n ),\n },\n dropbox: {\n name: \"Dropbox\",\n colors: [\"#0061FE\"],\n logo: svg(\n '',\n ),\n },\n apple: {\n name: \"Apple\",\n mono: true,\n logo: svg(\n '',\n ),\n },\n vercel: {\n name: \"Vercel\",\n mono: true,\n logo: svg(\n '',\n ),\n },\n reddit: {\n name: \"Reddit\",\n colors: [\"#FF4500\"],\n logo: svg(\n '',\n ),\n },\n bitbucket: {\n name: \"Bitbucket\",\n colors: [\"#0052CC\", \"#2684FF\"],\n logo: svg(\n '',\n ),\n },\n};\n\nconst buttonVariants = cva(\n \"clover-auth relative isolate inline-flex min-w-0 max-w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 outline-none select-none disabled:cursor-not-allowed\",\n {\n variants: {\n size: {\n sm: \"h-9 w-[min(232px,100%)] rounded-[var(--auth-radius)] px-3 text-xs [--auth-mark:14px] [--auth-radius:12px]\",\n default:\n \"h-11 w-[min(272px,100%)] rounded-[var(--auth-radius)] px-4 text-[13px] [--auth-mark:16px] [--auth-radius:14px]\",\n lg: \"h-12 w-[min(304px,100%)] rounded-[var(--auth-radius)] px-5 text-sm [--auth-mark:18px] [--auth-radius:16px]\",\n },\n },\n defaultVariants: { size: \"default\" },\n },\n);\n\nconst styles = `\n .clover-auth {\n --auth-base: #f4f4f6;\n --auth-text: #18181b;\n --auth-border: oklch(.922 0 0);\n --auth-tint: .09;\n --auth-wash-filter: blur(30px) saturate(1.3);\n --auth-glass: linear-gradient(180deg, #ffffffa6, #ffffff59 55%, #ffffff80);\n --auth-mono: none;\n --auth-depth: linear-gradient(180deg, #ffffff80, #0000000a);\n --auth-highlight: #ffffffd9;\n --auth-text-shadow: 0 1px 0 #ffffffb3;\n background: var(--auth-base);\n border: 1.5px solid var(--auth-border);\n color: var(--auth-text);\n transition: opacity 200ms ease;\n -webkit-tap-highlight-color: transparent;\n }\n .clover-auth:focus-visible { outline: 2px solid var(--ring, #8989a5); outline-offset: 4px; }\n .clover-auth:disabled { opacity: .45; }\n .dark .clover-auth {\n --auth-base: #0a0b0d;\n --auth-text: #fff;\n --auth-border: oklch(1 0 0 / .19);\n --auth-tint: .1;\n --auth-wash-filter: blur(30px) saturate(.7) brightness(1.8);\n --auth-glass: linear-gradient(180deg, #ffffff09, #ffffff02 55%, #ffffff05);\n --auth-depth: linear-gradient(180deg, #ffffff0d, #00000033);\n --auth-highlight: #ffffff1f;\n --auth-text-shadow: 0 1px 0 #00000080;\n --auth-mono: brightness(0) invert(1);\n }\n .clover-auth-surface { background: var(--auth-base); }\n .clover-auth-press {\n position: absolute;\n inset: 0;\n background: radial-gradient(90% 120% at 50% 55%, color-mix(in oklab, var(--auth-glow) 12%, transparent), transparent 75%);\n opacity: 0;\n transition: opacity 280ms ease;\n }\n .clover-auth:active:not(:disabled) .clover-auth-press { opacity: 1; transition-duration: 80ms; }\n .clover-auth-color {\n position: absolute;\n inset: -20%;\n background: var(--auth-wash);\n opacity: var(--auth-tint);\n filter: var(--auth-wash-filter);\n }\n .clover-auth-glass {\n position: absolute;\n inset: 0;\n background: var(--auth-glass);\n backdrop-filter: blur(12px) saturate(1.2);\n -webkit-backdrop-filter: blur(12px) saturate(1.2);\n }\n .clover-auth-depth {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: var(--auth-depth);\n box-shadow: inset 0 1px 0 var(--auth-highlight);\n }\n .clover-auth-lens {\n width: var(--auth-mark);\n height: var(--auth-mark);\n }\n .clover-auth-lens[data-mono] img { filter: var(--auth-mono); }\n @media (prefers-reduced-motion: reduce) {\n .clover-auth, .clover-auth * { transition: none !important; animation: none !important; }\n }\n @media (forced-colors: active) {\n .clover-auth { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }\n .clover-auth-surface { display: none; }\n .clover-auth:focus-visible { outline-color: Highlight; }\n .clover-auth-lens { forced-color-adjust: none; }\n }\n`;\n\nfunction AuthButton({\n provider = \"google\",\n size = \"default\",\n intent = \"signin\",\n disabled = false,\n type = \"button\",\n className,\n style,\n children,\n ...props\n}: AuthButtonProps) {\n const brand = typeof provider === \"string\" ? providerBrands[provider] : provider;\n const [failedLogo, setFailedLogo] = React.useState(null);\n const logoFailed = failedLogo === brand.logo;\n const prefix = { signin: \"Sign in with\", signup: \"Sign up with\" }[intent];\n const label = children ?? `${prefix} ${brand.name}`;\n const glow = brand.glow ?? brand.colors?.[0] ?? \"#71717a\";\n const wash = brand.colors?.length\n ? `linear-gradient(110deg, ${[...brand.colors, brand.colors[0]].join(\", \")})`\n : undefined;\n\n return (\n <>\n \n \n \n {wash && }\n \n \n \n \n \n {logoFailed ? (\n brand.name.slice(0, 1)\n ) : (\n setFailedLogo(brand.logo)}\n className=\"size-[var(--auth-mark)] object-contain\"\n />\n )}\n \n \n {label}\n \n \n \n );\n}\n\nexport { AuthButton };\n", "type": "registry:component" } ], "meta": { "addedAt": "2026-10-20" }, "type": "registry:component" }