shadcn.io is not affiliated with official shadcn/ui
Social Login Checkout Block for React
Three provider rows with lettermark tiles that fill the contact form from a typed sample profile, a Clear that empties it, a guest rule and a Continue that names each missing field; no provider is ever contacted.
Installation
Overview
Save the typing without making an account, with this fill-from-a-provider checkout for React with Base UI. A compact header from Ashlar and Oak, a record shop, sits over a hairline frame with a plus mark on each corner. The first cell lists three outline Buttons for Apple, Google and GitHub, each with a two-letter lettermark tile and the name in words, never a logo, over an "or continue as guest" rule. The second cell is the contact form: full name, email, phone and street and town, in Fields. Pressing a provider fills the form from a typed sample profile and says so in the status line ("Filled from a sample Apple profile in this demo; nothing connected"), leaving focus on the row, which shows a reserved "Filled" mark. A ghost Clear empties the form and focuses the name. Continue to shipping is the only Shine Button and names each missing or wrong part. For checkouts that offer a faster way to fill the details.
FAQ
Does it sign anyone in?
No. Nothing contacts Apple, Google or GitHub, loads a provider script or sets a cookie. Each row only copies a typed sample profile (PROVIDERS) into the form, and the sentence under the rows says a provider is never contacted. A real version would start the provider's own sign-in on press, then fill the form from the profile fields you were granted.
Is the guest path the form itself?
Yes. Typing the details needs no account, so the rule "or continue as guest" sits under the rows and the form is the guest path. Continue saves the details only in the tab. Add an optional "Save for next time" step after payment if you want accounts.
What does Clear do?
It empties all four fields, removes the "Filled" mark, says "Form cleared." and moves focus to the name field. When the form is already empty it stays in place and says so, rather than being disabled, so keyboard users always get an answer.
What happens when I press Continue with something wrong?
The button is never disabled. A press marks the name, email or street that is missing or wrong, each in its own reserved line with an icon and words, says "Not saved. Fix the marked fields." and moves focus to the first. Phone is optional. Filling from a provider clears any problems shown.
What stays local, and how do I connect it for real?
Everything: the sample profiles, the fields and the result. To connect it, use your authentication library's provider sign-in, request only the name, email and phone scopes you need, fill the same four fields from the response, and let the buyer edit them before they continue. Keep the profile data on your server, not in the page's markup.