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 centered password card over a softened full-bleed photo, under a header with a Create an account pill
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
- A plain centered card on a flat page, with Google and Apple above the fields: use the Centered Password Login block
- An emailed link sign-in with the photo in a sticky side panel: use the Photo Magic Link block
- 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
AnimatedBackgroundis a still photo, not motion; swap the hotlinked UnsplashBACKGROUND_IMAGEfor an image you host- Create an account in the header pill and at the foot of
LoginForm, and its Forgot password link, have noonClick - The 14,000+ product teams caption under
LoginFormis hardcoded in auth.tsx; put in your own count - 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
https://web.dev.reui.io/blocks/application/auth/auth-8.mdget_block("auth-8")npx shadcn@latest add @reui/auth-8Shadcn Photo Backdrop Login Block
Centered Frame login card over a softened photo backdrop with social provider sign-in. Part of the ReUI Shadcn Application Auth blocks collection.
Single-card sign-in centered on a blurred Unsplash photo with noise grain: email or username and password fields, show/hide toggle, Forgot password, and Google, Apple, GitHub buttons. ReUI Frame; shadcn Field, InputGroup, Button. Login page.
It is composed from Button, Field, Frame, Input Group, Item, Separator, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Photo Backdrop Login 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
- Split Method Picker Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar
- 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 Photo Backdrop Login block?
Use it for a centered password card over a softened full-bleed photo, under a header with a Create an account pill.
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 a plain centered card on a flat page, with Google and Apple above the fields, use the Centered Password Login block. For an emailed link sign-in with the photo in a sticky side panel, use the Photo Magic Link block. 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 Photo Backdrop Login block built with?
Can I restyle the Photo Backdrop Login 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.