Shadcn Onboarding Flow with Cover

Onboarding Flow with Cover is a split-screen variant of the account setup wizard, pairing the form with a full-height image cover panel. The left side shows a branded photo with a dark overlay and company logo, while the right side runs the same Shadcn UI steps for account type, team, company info, and payment with card formatting and per-step validation. A Zustand store keeps form data in sync across steps, and the Tailwind layout hides the cover on small screens so the React form takes over. The block ships in React, Vuejs, and Svelte versions.

Pro

Other Onboarding Flows Examples

Onboarding Flow

Product Lists

Get Unlimited Access to All Examples & Blocks.

Unlock everything with a single payment. Get lifetime access to all content. You will also receive free access to all new examples.

Buy Now

Onboarding Beside a Full Height Cover Image

Onboarding Flow with Cover turns account setup into a split screen experience: a five step wizard occupies one column while a full height photograph fills the other. The block reads like the polished activation screens of modern SaaS products, and it shares its visual DNA with split layout login pages, which makes the two easy to pair for a consistent signup to onboarding journey. Everything is written in React with Tailwind classes and Shadcn UI form components.

Anatomy of the Cover Panel

The CoverPanel component is deliberately small but dense with technique. A next/image element with the fill and priority props stretches the photo across the entire column, a bg-black/30 overlay dims it so foreground elements stay readable, and a floating brand badge sits in the corner: a frosted square built from bg-white/15, a ring-white/25 outline, and backdrop-blur, next to an Acme Inc. wordmark with a drop shadow.

The whole panel is wrapped in hidden md:block, so phones skip the artwork entirely and get a distraction free form. That single class is the block's responsive strategy, no JavaScript media queries involved.

The Wizard Column: Components and State

The form side runs the complete onboarding sequence: selectable account type tiles, a team size grid, a RadioGroup of plans, business inputs with an industry Select, a card payment step with auto formatted numbers, and a summary finale. It is assembled from the Shadcn UI Button, Input, Label, RadioGroup, Select, Switch, and Separator components plus a custom StepIndicator. A Zustand store holds currentStep and the typed form data with next, prev, update, and reset actions, while per step validation surfaces problems in a destructive colored message before letting the user advance.

Branding the Panel and Theming the Form

Making the block yours takes two edits: point the Image src at your own photograph or illustration, and swap the badge contents for your logo. The form column needs no retouching at all, because it draws every color from Shadcn UI tokens like primary, muted, border, and destructive, which resolve correctly whether the surrounding app runs Tailwind's light palette or its dark mode. The photo side is theme neutral by design, since the dark overlay keeps white text readable over any image in either mode.

Where to Use It and How to Get It

Reach for this variant when onboarding is a moment worth dressing up: post signup activation in a SaaS product, workspace creation, or paid plan setup where the extra column carries brand photography or social proof. As a Pro block, its full source opens after an All Access upgrade, and once open you have two routes in: run the shadcn CLI command shown above the preview, switchable between npm, pnpm, yarn, and bun, or copy the four source files by hand from the code tab.

Frequently Asked Questions

Why does the cover image disappear on small screens?

The panel is wrapped in hidden md:block, so below the md breakpoint the layout collapses to a single column containing only the wizard. On phones the artwork would cost vertical space without adding usability, so the block trades it away automatically.

How do I replace the Acme Inc. logo and photo?

Both live in cover-panel.tsx. Change the next/image src to your own asset and edit the badge markup, which is a small frosted square plus a text label. The bg-black/30 overlay usually needs no adjustment, but you can raise or lower the opacity to match how busy your image is.

Is the form logic different from the standard onboarding variant?

No, the wizard core is the same five step sequence with a Zustand store, per step validation, card number formatting, and a summary screen. What this variant adds is purely compositional: a two column shell and the CoverPanel component beside the form.

Is there a version for Vuejs or Svelte?

Yes. Alongside the React source, the split screen flow is offered for Vuejs through the shadcn-vue port and for Svelte through shadcn-svelte, so you can keep the identical layout regardless of which of the three frameworks your product uses.

What plan unlocks the split screen flow?

This example is gated at the Pro level. Purchasing All Access reveals the code tab and enables the CLI install for this block along with every other pro and premium example on the site, while the live preview stays free for everyone.