Product onboarding primitives
Visual primitives for the post-signup activation flow — welcome modal, setup checklist, first-action grid, sample-data banner, tour invitation, milestone tracker, feature highlight, achievement toast, integration steps, profile meter, empty team prompt, email reminder, demo workspace switcher, and a full get-started template. Visual reference only — no real backend wired.
Product onboarding primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Product onboarding primitives: Visual primitives for the post-signup activation flow — welcome modal, setup checklist, first-action grid, sample-data banner, tour invitation, milestone tracker, feature highlight, achievement toast, integration steps, profile meter, empty team prompt, email reminder, demo workspace switcher, and a full get-started template. Visual reference only — no real backend wired.
Welcome modal
First-login welcome modal with garage-door SVG illustration, three next-step CTAs, and a skip link.
Setup checklist
Vertical workshop-setup checklist with circular check-state, progress bar, expandable details, complete-now CTAs.
First-action grid
Grid of first-thing-to-do CTA cards — add a vehicle, schedule a job, invite the crew, connect Stripe, ADR settings.
Sample-data banner
Amber top banner with inline toggle that swaps between sample data and the live Oak Flats workspace.
Tour invitation
Card inviting the user to take the product tour — thumbnail rail of tour stops, duration chip, start-tour CTA.
Milestone tracker
Horizontal tracker of 5 onboarding milestones with progress fill and an animated You-Are-Here marker.
Feature highlight
Card highlighting one new feature — pulsing kicker chip, headline, supporting body, try-it CTA, dismiss chevron.
Achievement-unlock toast
Gold-bordered toast with trophy SVG and points chip — triggers a confetti burst on appear.
Connect integration
Single integration setup step — abstract SVG mark, status chip cycle, Connect / Manage CTA.
Profile completion
Profile completion meter — N / M fields filled, percent fill, remaining-field chips, complete-profile CTA.
Empty team prompt
Empty-state when no crew exists — friendly SVG, invite-team CTA, import-from-CSV alternative.
Email reminder
Inline reminder card showing the next onboarding email — subject, sender, preview, send-time chip.
Demo workspace switcher
Banner offering to swap into a demo workspace with sample data — toggle returns to real data anytime.
Get-started template
Compositional template wrapping welcome, checklist, first-actions, and milestones into a Getting Started surface.
Full first-run scene
Sample banner + welcome modal + checklist + first-actions + milestones + feature highlight + achievement toast.