Default
Show the codeHide the code
Default, code
<SocialSignIn providers={[{ provider: 'google' }, { provider: 'microsoft' }, { provider: 'email' }]} />SocialSignIn
Sign-in providers stacked at equal size before the password option, each with the vendor's own mark and wording.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Button (a group of buttons)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
With Apple (placeholder)
Show the codeHide the code
With Apple (placeholder), code
<SocialSignIn providers={[{ provider: 'apple' }, { provider: 'google' }, { provider: 'phone' }]} />Loading
Show the codeHide the code
Loading, code
<SocialSignIn providers={[{ provider: 'google', isLoading: true }, { provider: 'microsoft' }, { provider: 'email' }]} />Tokens
The 5 design tokens SocialSignIn reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 5 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.strong | … | --sd-color-border-strong |
| radius.sm | … | --sd-radius-sm |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/social-sign-inThen import it
import { SocialSignIn } from "@/components/ui/social-sign-in"Props
| Prop | Type | What it does |
|---|---|---|
providersrequired | SocialProvider[] | The providers, top to bottom, all the same size (equal prominence). |
onSignIn | (provider: SocialProviderName) => void | Called with the provider pressed. |
aria-label | stringDefault 'Sign in options' | Names the group. Default "Sign in options". |
className | string |
When to use it
Use it for
- Sign in and sign up screens
- Offering a way in with no password to remember (3.3.8)
Use something else for
- Account linking lists: use SettingRow
- Restyling a vendor's button or mark: the marks ship unmodified
Accessibility
Screen readers announce "Sign in options, group. Continue with Google, button. Sign in with Microsoft, button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5.
Buttons stay 48px tall in both densities.
What your product still has to do
- Put SocialSignIn before the email and password option, and keep every provider the same size
- Use the real Sign in with Apple button (Apple's JS) in production: the apple provider is a placeholder, because Apple's artwork is licensed for your own app only
- Follow each vendor's branding rules (clone-pipeline/packs/brand/third-party/README.md)
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 130 text runs: 0 below 7:1, lowest 16.71:1 |
| Target size | 44 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 54 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab moves to the first provider |
| Tab | Tab moves to the next provider, in order |
| Shift+Tab | Shift+Tab moves back |
In Figma
The Figma component is SocialSignIn. The Figma library isn’t published yet.
Figma to code: Stack → providers; nested Provider → providers.