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}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.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
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.
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
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.
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
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.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.