A compact toolbar of provider tiles with a tinted highlight that springs to the hovered or focused tile and a caption that rolls to Continue with the provider. Arrow keys, Home and End move between tiles.
Create your account
Free for your first three projects.
npx shadcn@latest add https://hyperblur.dev/r/social-login-icon-row.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-login-icon-row.tsx.
import { SocialLoginIconRow } from "@/components/hyperblur/social-login-icon-row"
<SocialLoginIconRow providers={["google", "github", "apple", "x"]} onSelect={(id) => signIn(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| providers | Array<SocialProviderId | { id: string; label?: string; icon?: ReactNode; color?: string; bg?: string; fg?: string }> | ["google", "github", "apple", "x", "discord"] | Providers in display order. Built-in ids: google, github, apple, x, linkedin, discord, facebook, microsoft, slack, spotify, twitch, figma, email, link. Pass an object to set a custom label, icon or colors, or to add any other provider. |
| labelPrefix | string | "Continue with" | Text placed before the provider name and used in the accessible name. |
| hint | string | "Pick a provider to continue" | Caption shown when no tile is active. Also the toolbar label. |
| tileSize | number | 46 | Tile size in pixels. Six tiles at 46 fit in 340px. |
| onSelect | (provider: string) => void | Promise<unknown> | Called with the provider id. Return a promise to keep the loading state until it settles. | |
| pendingDuration | number | 1400 | How long the loading state lasts in milliseconds when onSelect does not return a promise. |
| disabled | boolean | false | Disables every button. |