Overview
Functional social login buttons using Clerk Core 3's useSignIn() hook. Brand-accurate SVG logos with three visual variants and two layout options.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/clerk-oauth-buttons"Usage
import { ClerkOauthButtons } from "@/components/elements/clerk-oauth-buttons";
export function LoginPage() {
return (
<ClerkOauthButtons
providers={["google", "github", "apple"]}
variant="default"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
providers | ("google" | "github" | "apple" | "microsoft")[] | All 4 | Providers to show |
variant | "default" | "outline" | "icon" | "default" | Visual style |
layout | "horizontal" | "vertical" | "vertical" | Button layout |
size | "sm" | "default" | "lg" | "default" | Button size |
redirectUrl | string | "/" | Final redirect after auth |
afterSSOUrl | string | "/sso-callback" | OAuth callback page URL |
Features
- Brand-accurate SVG logos for each provider
- Three variants: default (icon+text), outline, icon-only
- Horizontal and vertical layouts
- Loading state per provider
- Customizable provider selection