OnboardingWizard

A SaaS composite for guided onboarding. Renders a StepIndicator at the top with the current step content below. Supports controlled/uncontrolled step state, per-step validation (isValid), optional steps with skip, and card/inline layout modes. Uses CSS transitions for step changes.

SaaSonboardingwizardsteppersetupflowsaas

Basic onboarding

import { OnboardingWizard } from '@primstack/ui/onboarding-wizard'

<OnboardingWizard
  steps={[
    { id: 'profile', title: 'Profile', content: <ProfileForm /> },
    { id: 'team', title: 'Team', content: <TeamSetup />, isOptional: true },
    { id: 'done', title: 'Done', content: <Welcome /> },
  ]}
  onComplete={() => router.push('/dashboard')}
  showSkipButton
/>

Related Components

StepIndicator

Multi-step progress tracker for wizards and flows.

feedbackstepperwizard

Card

Composable container with header, content, and footer slots.

data-displaycontainersurface

Button

Versatile button with multiple variants, sizes, and states.

form-inputsactionform

Separator

Visual divider line, horizontal or vertical.

layoutdividerline