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="uc-max-w-sm uc-mx-auto uc-text-center uc-py-8">
  <div class="uc-w-20 uc-h-20 uc-rounded-2xl uc-bg-tint-blue uc-mx-auto uc-mb-6">...</div>
  <h2 class="uc-text-2xl uc-font-bold uc-mb-2">Welcome to AppName</h2>
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-8">Description text</p>
  <button class="uc-btn uc-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="uc-max-w-sm uc-mx-auto uc-space-y-8">
  <!-- Dots -->
  <div class="uc-flex uc-items-center uc-justify-center uc-gap-2">
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-neutrals-muted"></span>
  </div>
  <!-- Progress bar -->
  <div>
    <div class="uc-flex uc-items-center uc-justify-between uc-mb-2">
      <span class="uc-text-xs uc-font-medium">Step 3 of 5</span>
      <span class="uc-text-xs uc-text-fg-disabled">60%</span>
    </div>
    <div class="uc-h-1.5 uc-rounded-full uc-bg-neutrals-muted">
      <div class="uc-h-full uc-rounded-full uc-bg-accents-blue" style="width: 60%"></div>
    </div>
  </div>
  <!-- Numbered steps -->
  <div class="uc-flex uc-items-center uc-justify-center uc-gap-0">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">...</div>
    <div class="uc-h-0.5 uc-w-8 uc-bg-accents-blue"></div>
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue">3</div>
    <div class="uc-h-0.5 uc-w-8 uc-bg-neutrals-muted"></div>
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-neutrals-muted">4</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="uc-max-w-sm uc-mx-auto uc-py-4">
  <div class="uc-flex uc-items-center uc-justify-center uc-gap-2 uc-mb-6">
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-neutrals-muted"></span>
  </div>
  <h3 class="uc-text-lg uc-font-semibold uc-mb-1 uc-text-center">Set up your profile</h3>
  <p class="uc-text-sm uc-text-fg-disabled uc-text-center uc-mb-6">Tell us a bit about yourself</p>
  <div class="uc-flex uc-justify-center uc-mb-6">
    <div class="uc-w-20 uc-h-20 uc-rounded-full uc-bg-neutrals-muted">...</div>
  </div>
  <div class="uc-space-y-4">
    <div>
      <label class="uc-text-sm uc-font-medium uc-mb-1.5 uc-block">Full Name</label>
      <input type="text" placeholder="John Doe" class="uc-input" />
    </div>
    <div>
      <label class="uc-text-sm uc-font-medium uc-mb-1.5 uc-block">Username</label>
      <input type="text" placeholder="@johndoe" class="uc-input" />
    </div>
  </div>
  <div class="uc-flex uc-gap-3 uc-mt-8">
    <button class="uc-btn uc-btn-bordered uc-flex-1">Back</button>
    <button class="uc-btn uc-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="uc-max-w-sm uc-mx-auto uc-py-4">
  <div class="uc-flex uc-items-center uc-justify-center uc-gap-2 uc-mb-6">
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></span>
    <span class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-neutrals-muted"></span>
  </div>
  <h3 class="uc-text-lg uc-font-semibold uc-mb-1 uc-text-center">What are you interested in?</h3>
  <p class="uc-text-sm uc-text-fg-disabled uc-text-center uc-mb-6">Select at least 3 topics</p>
  <div class="uc-flex uc-flex-wrap uc-gap-2 uc-justify-center">
    <span class="uc-tag uc-tag-selected">Design</span>
    <span class="uc-tag uc-tag-selected">Development</span>
    <span class="uc-tag">Marketing</span>
    <span class="uc-tag uc-tag-selected">Product</span>
    <span class="uc-tag">Analytics</span>
    <span class="uc-tag">Finance</span>
  </div>
  <p class="uc-text-xs uc-text-fg-disabled uc-text-center uc-mt-4">3 of 3 selected</p>
  <div class="uc-flex uc-gap-3 uc-mt-6">
    <button class="uc-btn uc-btn-bordered uc-flex-1">Back</button>
    <button class="uc-btn uc-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="uc-max-w-sm uc-mx-auto uc-text-center uc-py-8">
  <div class="uc-w-16 uc-h-16 uc-rounded-full uc-bg-accents-blue/15 uc-mx-auto uc-mb-6">...</div>
  <h2 class="uc-text-2xl uc-font-bold uc-mb-2">You're all set!</h2>
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-8">Your account is ready. Start exploring.</p>
  <button class="uc-btn uc-w-full uc-max-w-xs">Go to Dashboard</button>
  <button class="uc-text-sm uc-text-fg-disabled uc-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
uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue Indicator Completed step dot — filled with accent color
uc-w-2 uc-h-2 uc-rounded-full uc-bg-neutrals-muted Indicator Pending step dot — muted background
uc-max-w-sm Container Constrains onboarding content width
uc-text-center Alignment Centers text content within the container
uc-btn uc-w-full Button Full-width primary action button
uc-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