Onboarding Flow — Veritheme

Welcome Screen

First screen with hero illustration and CTA.

html

Welcome to AppName

The easiest way to manage your projects, tasks, and team collaboration.

Already have an account? Sign in

<div class="vt-max-w-sm vt-mx-auto vt-text-center vt-py-8">
  <div class="vt-w-20 vt-h-20 vt-rounded-2xl vt-bg-info-background vt-mx-auto vt-mb-6">...</div>
  <h2 class="vt-text-2xl vt-font-bold vt-mb-2">Welcome to AppName</h2>
  <p class="vt-text-sm vt-text-mains-quaternary vt-mb-8">Description text</p>
  <button class="vt-btn vt-w-full">Get Started</button>
</div>

Step Indicators

Dot and progress bar indicators for multi-step flows.

html

Dots

Progress Bar

Step 3 of 5 60%

Numbered

3

4

5

<div class="vt-max-w-sm vt-mx-auto vt-space-y-8">
  <!-- Dots -->
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-2">
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surfaces-moderate"></span>
  </div>
  <!-- Progress bar -->
  <div>
    <div class="vt-flex vt-items-center vt-justify-between vt-mb-2">
      <span class="vt-text-xs vt-font-medium">Step 3 of 5</span>
      <span class="vt-text-xs vt-text-mains-quaternary">60%</span>
    </div>
    <div class="vt-h-1.5 vt-rounded-full vt-bg-surfaces-moderate">
      <div class="vt-h-full vt-rounded-full vt-bg-info-primary vt-inline-86d5a62908"></div>
    </div>
  </div>
  <!-- Numbered steps -->
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-0">
    <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-info-primary">...</div>
    <div class="vt-h-0.5 vt-w-8 vt-bg-info-primary"></div>
    <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-info-primary">3</div>
    <div class="vt-h-0.5 vt-w-8 vt-bg-surfaces-moderate"></div>
    <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-surfaces-moderate">4</div>
  </div>
</div>

Profile Setup

Step where user enters their profile information.

html

Set up your profile

Tell us a bit about yourself

Full Name

Username

<div class="vt-max-w-sm vt-mx-auto vt-py-4">
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-2 vt-mb-6">
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surfaces-moderate"></span>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1 vt-text-center">Set up your profile</h3>
  <p class="vt-text-sm vt-text-mains-quaternary vt-text-center vt-mb-6">Tell us a bit about yourself</p>
  <div class="vt-flex vt-justify-center vt-mb-6">
    <div class="vt-w-20 vt-h-20 vt-rounded-full vt-bg-surfaces-moderate">...</div>
  </div>
  <div class="vt-space-y-4">
    <div>
      <label class="vt-text-sm vt-font-medium vt-mb-1.5 vt-block">Full Name</label>
      <input type="text" placeholder="John Doe" class="vt-input" />
    </div>
    <div>
      <label class="vt-text-sm vt-font-medium vt-mb-1.5 vt-block">Username</label>
      <input type="text" placeholder="@johndoe" class="vt-input" />
    </div>
  </div>
  <div class="vt-flex vt-gap-3 vt-mt-8">
    <button class="vt-btn vt-btn-bordered vt-flex-1">Back</button>
    <button class="vt-btn vt-flex-1">Continue</button>
  </div>
</div>

Select Interests

Let users choose topics or categories they care about.

html

What are you interested in?

Select at least 3 topics

Design Development Marketing Product Analytics Finance Sales Research

3 of 3 selected

<div class="vt-max-w-sm vt-mx-auto vt-py-4">
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-2 vt-mb-6">
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surfaces-moderate"></span>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1 vt-text-center">What are you interested in?</h3>
  <p class="vt-text-sm vt-text-mains-quaternary vt-text-center vt-mb-6">Select at least 3 topics</p>
  <div class="vt-flex vt-flex-wrap vt-gap-2 vt-justify-center">
    <span class="vt-chip vt-chip-active">Design</span>
    <span class="vt-chip vt-chip-active">Development</span>
    <span class="vt-chip">Marketing</span>
    <span class="vt-chip vt-chip-active">Product</span>
    <span class="vt-chip">Analytics</span>
    <span class="vt-chip">Finance</span>
  </div>
  <p class="vt-text-xs vt-text-mains-quaternary vt-text-center vt-mt-4">3 of 3 selected</p>
  <div class="vt-flex vt-gap-3 vt-mt-6">
    <button class="vt-btn vt-btn-bordered vt-flex-1">Back</button>
    <button class="vt-btn vt-flex-1">Continue</button>
  </div>
</div>

Completion

Final screen confirming onboarding is done.

html

You're all set!

Your account is ready. Start exploring and make the most of your experience.

<div class="vt-max-w-sm vt-mx-auto vt-text-center vt-py-8">
  <div class="vt-w-16 vt-h-16 vt-rounded-full vt-bg-info-primary/15 vt-mx-auto vt-mb-6">...</div>
  <h2 class="vt-text-2xl vt-font-bold vt-mb-2">You're all set!</h2>
  <p class="vt-text-sm vt-text-mains-quaternary vt-mb-8">Your account is ready. Start exploring.</p>
  <button class="vt-btn vt-w-full vt-max-w-xs">Go to Dashboard</button>
  <button class="vt-text-sm vt-text-mains-quaternary vt-mt-3">Take a tour first</button>
</div>

API Reference

All data attributes and utility classes available for the Onboarding Flow component.

Class	Type	Description
`vt-w-2 vt-h-2 vt-rounded-full vt-bg-info-primary`	Indicator	Completed step dot — filled with accent color
`vt-w-2 vt-h-2 vt-rounded-full vt-bg-surfaces-moderate`	Indicator	Pending step dot — muted background
`vt-max-w-sm`	Container	Constrains onboarding content width
`vt-text-center`	Alignment	Centers text content within the container
`vt-btn vt-w-full`	Button	Full-width primary action button
`vt-btn-bordered`	Button	Secondary "Back" button variant

Accessibility

Keyboard and screen reader support.

Feature	Details
Progress	Use aria-current="step" on the active step indicator
Headings	Each step should have a clear heading for screen reader navigation
Focus Management	When moving between steps, focus should move to the new step heading
Form Validation	Validate each step before allowing progression to next
Keyboard	Support Enter to proceed, Escape to cancel/go back