v1.1.1

Onboarding Flow

Step-by-step onboarding screens to guide users through setup.

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-surface vt-flex vt-items-center vt-justify-center vt-mx-auto vt-mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-zap vt-w-10 vt-h-10 vt-text-brand-fill">
      <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
    </svg>
  </div>
  <h2 class="vt-text-2xl vt-font-bold vt-mb-2">Welcome to AppName</h2>
  <p class="vt-text-sm vt-text-foreground-muted vt-mb-8 vt-max-w-xs vt-mx-auto">The easiest way to manage your projects, tasks, and team collaboration.</p>
  <button class="vt-btn vt-btn-primary vt-w-full vt-max-w-xs">
    Get Started
  </button>
  <p class="vt-text-xs vt-text-foreground-muted vt-mt-4">Already have an account? <a href="#" class="vt-text-brand-fill vt-font-medium">Sign in</a></p>
</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>
    <p class="vt-text-xs vt-text-foreground-muted vt-mb-3 vt-font-medium">Dots</p>
    <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-brand-fill"></span>
      <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></span>
      <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></span>
      <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate"></span>
      <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate"></span>
    </div>
  </div>
  <!-- Progress bar -->
  <div>
    <p class="vt-text-xs vt-text-foreground-muted vt-mb-3 vt-font-medium">Progress Bar</p>
    <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-foreground-muted">60%</span>
    </div>
    <div class="vt-h-1.5 vt-rounded-full vt-bg-surface-moderate">
      <div class="vt-h-full vt-rounded-full vt-bg-brand-fill vt-inline-86d5a62908"></div>
    </div>
  </div>
  <!-- Numbered steps -->
  <div>
    <p class="vt-text-xs vt-text-foreground-muted vt-mb-3 vt-font-medium">Numbered</p>
    <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-brand-fill vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <div class="vt-h-0.5 vt-w-8 vt-bg-brand-fill"></div>
      <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-brand-fill vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-generic-white">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <div class="vt-h-0.5 vt-w-8 vt-bg-brand-fill"></div>
      <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-brand-fill vt-text-generic-white vt-flex vt-items-center vt-justify-center vt-text-sm vt-font-semibold">3</div>
      <div class="vt-h-0.5 vt-w-8 vt-bg-surface-moderate"></div>
      <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-surface-moderate vt-text-foreground-muted vt-flex vt-items-center vt-justify-center vt-text-sm vt-font-semibold">4</div>
      <div class="vt-h-0.5 vt-w-8 vt-bg-surface-moderate"></div>
      <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-surface-moderate vt-text-foreground-muted vt-flex vt-items-center vt-justify-center vt-text-sm vt-font-semibold">5</div>
    </div>
  </div>
</div>

Profile Setup

Step where user enters their profile information.

html

Set up your profile

Tell us a bit about yourself

<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-brand-fill"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-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-foreground-muted 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-surface-moderate vt-flex vt-items-center vt-justify-center vt-relative vt-cursor-pointer vt-group">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-user vt-w-8 vt-h-8 vt-text-foreground-muted">
        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
      </svg>
      <div class="vt-absolute vt--bottom-0.5 vt--right-0.5 vt-w-6 vt-h-6 vt-rounded-full vt-bg-brand-fill vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-3 vt-h-3 vt-text-generic-white">
          <path d="M5 12h14"></path><path d="M12 5v14"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="vt-space-y-4">
    <div>
      <label class="vt-text-sm vt-font-medium vt-mb-1.5 vt-block" for="onboarding-flow-3-1">Full Name</label>
      <input type="text" placeholder="John Doe" class="vt-input" id="onboarding-flow-3-1">
    </div>
    <div>
      <label class="vt-text-sm vt-font-medium vt-mb-1.5 vt-block" for="onboarding-flow-3-2">Username</label>
      <input type="text" placeholder="@johndoe" class="vt-input" id="onboarding-flow-3-2">
    </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-btn-primary 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-brand-fill"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></span>
    <span class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-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-foreground-muted 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>
    <span class="vt-chip">Sales</span>
    <span class="vt-chip">Research</span>
  </div>
  <p class="vt-text-xs vt-text-foreground-muted 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-btn-primary 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-brand-fill/15 vt-flex vt-items-center vt-justify-center vt-mx-auto vt-mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-8 vt-h-8 vt-text-brand-fill">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <h2 class="vt-text-2xl vt-font-bold vt-mb-2">You're all set!</h2>
  <p class="vt-text-sm vt-text-foreground-muted vt-mb-8 vt-max-w-xs vt-mx-auto">Your account is ready. Start exploring and make the most of your experience.</p>
  <button class="vt-btn vt-btn-primary vt-w-full vt-max-w-xs">
    Go to Dashboard
  </button>
  <button class="vt-block vt-mx-auto vt-mt-3 vt-text-sm vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">Take a tour first</button>
</div>

Guidelines

Guide new users through setup one focused step at a time, showing progress and a clear next action.

Do
Show progress so users know how far along they are.
Don't
Don't hide progress — users abandon flows with no sense of place.

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-brand-fill Indicator Completed step dot — filled with accent color
vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-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