OnboardingWizard.

ProBlockOnboardingv0.1.0

A guided, resumable multi-step setup with progress, backward navigation and controlled completion. Each step renders any React content you pass.

Get Elements Pro

Demo dataResponsive

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/onboarding-wizard

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/onboarding-wizard.tsxblock
components/ui/button.tsxui
components/ui/card.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
steps (required)	OnboardingStep[]	—	Ordered steps, each with its own content.
eyebrow	string	'Workspace setup'	Small label above the step title.
initialStep	number	0	Resume a saved position.
onStepChange	(step) => void	—	Persist progress as the user moves between steps.
onComplete	() => void \| Promise<void>	—	Called from the final step.

OnboardingStep

Prop	Type	Default
id (required)	string	—
title (required)	string	—
description (required)	string	—
content (required)	ReactNode	—

Accessibility

Progress is an ordered list labelled "Setup progress", and the active step sets aria-current="step".
Back is disabled on the first step rather than hidden, so the layout does not shift.

OnboardingWizard.

Name your workspace

Installation

API

OnboardingStep

Accessibility