For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A 5 method picker with a WebAuthn passkey flow and toasts, beside a logo grid and rotating quotes
When to use
- A full page sign-in screen by password, emailed magic link or passkey, with social provider buttons
- A free trial signup page that opens an account from a work email or a social provider
- A split login layout that pairs the sign-in with a testimonial, a customer logo wall or a photo panel
When not to use
- The same method picker alone in the center, with no quote panel or page guides: use the Centered Method Picker block
- A step that takes a one-time code typed into separate digit slots: use the Input Otp component
- A data entry page inside the product, such as intake, invites or sign-in method rules: use the Form blocks
- Security options a signed in admin edits, such as session timeout and access toggles: use the Settings blocks
- A newsletter or waitlist email capture band on a landing page: use the CTA blocks
Agent notes
authenticateWithPasskeyposts toDEFAULT_PASSKEY_OPTIONS_ENDPOINTandDEFAULT_PASSKEY_VERIFY_ENDPOINT; serve both or pass your own- Use backup code in
LoginFormhas noonClick; wire it to your recovery code step - Replace the 18 grid logos in
AUTH12_SIDEBAR_BRANDSand the 6 quotes inAUTH12_SIDEBAR_TESTIMONIALS - Each form's submit handler only calls
preventDefault; call your auth backend from it - The social and SSO provider buttons have no
onClick; start your OAuth or SAML redirect from each - Replace the
AuthLogomark in auth-logo.tsx with your own brand logo
Third-party API docs
- Motion v12: API reference, docs (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: API reference, docs
https://web.dev.reui.io/blocks/application/auth/auth-12.mdget_block("auth-12")npx shadcn@latest add @reui/auth-12Shadcn Split Method Picker Block
Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar. Part of the ReUI Shadcn Application Auth blocks collection.
Login with Google, email, WebAuthn passkey, SAML SSO, and backup code, a two-step email reveal, and a framed sidebar with an animated brand-logo grid and rotating star testimonials. ReUI Alert; shadcn Button, Field, Input, Avatar. Sign-in, SSO.
It is composed from Alert, Avatar, Button, Field, Input, Item, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Split Method Picker Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Application Auth blocks to assemble a full screen instead of a single section.
All Shadcn Application Auth Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Photo Split Login Split-screen login page with animated grid backdrop and editorial image panel
- Customer Quotes Login Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel
- Magic Link Reviews Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas
- Photo Magic Link Split-screen magic-link sign-in with left image sidebar and social login buttons
- Framed Password Login Framed password sign-in card with email or username, social provider row, and footer nav
- Workspace Sign-In Split-screen workspace sign-in with animated stacked media panel and social SSO
- Free Trial Signup Split-screen marketing trial signup page with animated gradient blob background and social login
- Magic Link Logos Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar
- Founder Story Login Split-screen login with social OAuth and testimonial sidebar over an animated grid background
- Split Testimonial Login Split-screen login with testimonial sidebar and animated dot backdrop
- Work Email Continue Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer
- Magic Link Card Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos
- Photo Backdrop Login Centered Frame login card over a softened photo backdrop with social provider sign-in
- Rotating Quotes Login Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial
- Invite-Only Sign-In Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login
- Centered Magic Link Centered magic-link email login with logo, social sign-in buttons, and legal footer
- Centered Method Picker Centered login method picker with WebAuthn passkey sign-in and email reveal step
- Social Proof Login Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle
- Centered Password Login Centered sign-in card with Google and Apple buttons, password visibility toggle, and email login
Related Shadcn Application Block Categories
- App Shell (35) App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.
- Card (43) Card components for content display, data summaries, and interactive elements.
- Dashboard (8) Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Dialog (14) Dialog components for modal windows, alerts, confirmations, and content overlays.
- Empty State (14) Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.
- Event Calendar (6) Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Split Method Picker block?
Use it for a 5 method picker with a WebAuthn passkey flow and toasts, beside a logo grid and rotating quotes.
The Auth category fits:
- A full page sign-in screen by password, emailed magic link or passkey, with social provider buttons
- A free trial signup page that opens an account from a work email or a social provider
- A split login layout that pairs the sign-in with a testimonial, a customer logo wall or a photo panel
For the same method picker alone in the center, with no quote panel or page guides, use the Centered Method Picker block. For a step that takes a one-time code typed into separate digit slots, use the Input Otp component. For a data entry page inside the product, such as intake, invites or sign-in method rules, use the Form blocks. For security options a signed in admin edits, such as session timeout and access toggles, use the Settings blocks. For a newsletter or waitlist email capture band on a landing page, use the CTA blocks.
What is the Split Method Picker block built with?
Can I restyle the Split Method Picker block?
How should I use Shadcn auth blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.