Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
1function App() {
2 const [step, setStep] = React.useState(0);
3 const steps = [
4 { title: "Tell us about you", hint: "Just the basics — you can edit later." },
5 { title: "Choose your stack", hint: "Pick the framework you ship with most often." },
6 { title: "Invite your team", hint: "Optional. We'll generate a private invite link." },
7 ];
8 const [stack, setStack] = React.useState("react");
9 const stacks = [
10 { id: "react", label: "React", icon: "M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5", tint: "#22d3ee" },
11 { id: "vue", label: "Vue", icon: "M13 10V3L4 14h7v7l9-11h-7z", tint: "#34d399" },
12 { id: "svelte", label: "Svelte", icon: "M11.49 3.17c-4.16 0-6.05 1.41-7.05 3.39C3.36 7.78 3.22 9.09 3.16 10.55c-.04 1.13.04 2.32.04 3.47 0 .27.04.49.13.79.81 3.05 3.84 5.06 7.5 5.07 4.6.01 7.83-3.22 7.83-7.45a7.78 7.78 0 00-.94-3.7c-1.41-2.64-4.84-5.56-6.23-5.56z", tint: "#f472b6" },
13 { id: "solid", label: "SolidJS", icon: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", tint: "#a855f7" },
14 ];
15
16 return (
17 <section className="step-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
18 <span className="step-orb orb-a" />
19 <span className="step-orb orb-b" />
20
21 <div className="relative w-full max-w-xl">
22 <div className="step-card rounded-3xl p-7 sm:p-9">
23 <div className="flex items-center justify-between mb-5">
24 <p className="text-[11px] uppercase tracking-[0.18em] font-bold text-cyan-300/85">Step {step + 1} of {steps.length}</p>
25 <p className="text-[11px] font-semibold text-slate-400">{Math.round(((step + 1) / steps.length) * 100)}%</p>
26 </div>
27 <div className="step-progress mb-6">
28 <span className="step-progress-fill" style={{ width: `${((step + 1) / steps.length) * 100}%` }} />
29 </div>
30
31 <div key={step} className="step-panel">
32 <h2 className="text-white font-bold text-2xl tracking-tight mb-1">{steps[step].title}</h2>
33 <p className="text-slate-300/70 text-sm mb-6">{steps[step].hint}</p>
34
35 {step === 0 && (
36 <div className="space-y-3">
37 <label className="block">
38 <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-300/80">Full name</span>
39 <input type="text" defaultValue="Riya D." className="step-input mt-1.5 w-full rounded-xl px-4 py-3 text-white text-[14px] outline-none" />
40 </label>
41 <label className="block">
42 <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-300/80">Role</span>
43 <input type="text" defaultValue="Design Engineer" className="step-input mt-1.5 w-full rounded-xl px-4 py-3 text-white text-[14px] outline-none" />
44 </label>
45 </div>
46 )}
47
48 {step === 1 && (
49 <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
50 {stacks.map((s) => (
51 <button key={s.id} type="button" onClick={() => setStack(s.id)} className={`step-tile ${stack === s.id ? "is-active" : ""}`} style={{ "--tint": s.tint }}>
52 <span className="step-tile-icon"><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}><path strokeLinecap="round" strokeLinejoin="round" d={s.icon} /></svg></span>
53 <span className="text-white text-[12.5px] font-semibold">{s.label}</span>
54 </button>
55 ))}
56 </div>
57 )}
58
59 {step === 2 && (
60 <div className="text-center py-4">
61 <span className="step-done mx-auto mb-4"><svg className="w-7 h-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg></span>
62 <p className="text-white font-bold text-lg mb-1">All set, Riya!</p>
63 <p className="text-slate-300/70 text-[13px] mb-5">Your workspace is ready. Grab the invite link below to bring your team in.</p>
64 <div className="step-invite inline-flex items-center gap-2 px-3 py-2 rounded-xl">
65 <svg className="w-3.5 h-3.5 text-cyan-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 015.656 0M10.172 13.828a4 4 0 01-5.656 0" /></svg>
66 <span className="font-mono text-[12px] text-slate-300/85">atlas.app/join/atl-2x7g3</span>
67 <button type="button" className="step-invite-copy">Copy</button>
68 </div>
69 </div>
70 )}
71 </div>
72
73 <div className="flex items-center justify-between mt-7">
74 <button type="button" disabled={step === 0} onClick={() => setStep((s) => Math.max(0, s - 1))} className="step-back inline-flex items-center gap-1.5 text-[13px] font-semibold px-4 py-2 rounded-full">
75 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
76 Back
77 </button>
78 <button type="button" onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))} className="step-next inline-flex items-center gap-1.5 text-[13px] font-semibold px-5 py-2.5 rounded-full">
79 {step === steps.length - 1 ? "Finish" : "Continue"}
80 <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
81 </button>
82 </div>
83 </div>
84 </div>
85 </section>
86 );
87}Floating action button that fans out four sub-actions in a radial arc on click. Tap rotates the plus icon to a close icon; each action chip eases in.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
Spotlight-style command palette with live keystroke filtering, keyboard hint chips and grouped results. Backdrop blurs the page below for focus.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.
Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
546
Snippets
2629.8k
Views
86.3k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.