Onboarding Wizard

v0.2.6

Multi-step wizard shell: header, step indicator, scrollable body, and sticky footer actions.

Install

npx shadcn@latest add @signalos/onboarding-wizard

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/button) are pulled automatically.

Preview

Example & code

onboarding-wizard.example.tsx

import { useState } from "react"

import { OnboardingWizard } from "@/components/widgets/onboarding-wizard/OnboardingWizard"

import { OnboardingWizardStep } from "./OnboardingWizard.types"

const STEPS: OnboardingWizardStep[] = [
  { id: 1, label: "Configure Model", optional: true },
  { id: 2, label: "Data Connectors" },
  { id: 3, label: "Create Pipeline" },
]

export default function Example() {
  const [step, setStep] = useState(1)

  return (
    <OnboardingWizard
      steps={STEPS}
      currentStep={step}
      eyebrow={`Step ${step} of ${STEPS.length}`}
      title="Welcome to SignalOS"
      canGoBack={step > 1}
      canProceed
      onNext={() => setStep((s) => Math.min(s + 1, STEPS.length))}
      onBack={() => setStep((s) => Math.max(s - 1, 1))}
      onFinish={() => console.info("finished")}
    >
      <div>Step {step} content</div>
    </OnboardingWizard>
  )
}

Props

OnboardingWizardStep

Prop	Type	Default
id*	`number`	-
label*	`string`	-
description	`string \| undefined`	-
optional	`boolean \| undefined`	-

OnboardingWizardProps

Prop	Type	Default	Description
steps*	`OnboardingWizardStep[]`	-
currentStep*	`number`	-
completedBefore	`number \| undefined`	-
eyebrow	`ReactNode`	-
title*	`ReactNode`	-
subtitle	`ReactNode`	-
children*	`ReactNode`	-
error	`ReactNode`	-
canGoBack	`boolean \| undefined`	-
canProceed	`boolean \| undefined`	-
isSubmitting	`boolean \| undefined`	-
isOptional	`boolean \| undefined`	-
onBack	`(() => void) \| undefined`	-
onNext	`(() => void) \| undefined`	-
onFinish	`(() => void) \| undefined`	-
className	`string \| undefined`	-
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.
open	`boolean \| undefined`	-

OnboardingWizardHeaderProps

Prop	Type	Default
eyebrow	`ReactNode`	-
title*	`ReactNode`	-
subtitle	`ReactNode`	-

OnboardingWizardStepIndicatorProps

Prop	Type	Default
steps*	`OnboardingWizardStep[]`	-
currentStep*	`number`	-
completedBefore	`number \| undefined`	-

OnboardingWizardFooterProps

Prop	Type	Default
totalSteps*	`number`	-
currentStep*	`number`	-
canGoBack	`boolean \| undefined`	-
canProceed	`boolean \| undefined`	-
isSubmitting	`boolean \| undefined`	-
isOptional	`boolean \| undefined`	-
onBack	`(() => void) \| undefined`	-
onNext	`(() => void) \| undefined`	-
onFinish	`(() => void) \| undefined`	-

npm dependencies

lucide-react@^1.7.0

Changelog

0.2.6

Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

onboarding-wizard

0.2.5

format the code

0.2.4

0.2.1

Fixed a malformed sm:px- class (missing size suffix, so it generated no rule) on the header wrapper - it now reads sm:px-8, matching main and footer in the same component. Previously the header lost its intended extra horizontal padding at sm and up, misaligning it against the body and footer.

0.2.0

Breaking: rename the testId prop to data-testid to match the rest of the registry and the DOM attribute name.

0.1.2

Use semantic status tokens (text-text-error, bg-bg-warning, border-border-, bg-status-) instead of raw palette scales so client theme overrides restyle status colors.

0.1.1

Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: generic multi-step wizard shell (header + step indicator + scrollable body + sticky footer actions) with error banner slot and optional-step affordance.