OnboardingView

Stripe OnboardingView

A setup with dependent steps on its own page: the task list stays on the left (sticky, with progress), the selected task opens on the right with its title, its form and one primary action. The pane slides in when the task changes, unsaved work asks before it is thrown away, and on phones the task opens full screen behind “← Tasks”. Pair it with useSetupFlow, which derives every task's status from your record.

pnpm add @zikzuk/ui

import { OnboardingView, useSetupFlow, useTaskUrl } from "@zikzuk/ui";

Connect an SMS provider

Statuses come from useSetupFlow; saving marks the row complete and opens the next task.

Credentials

Paste the API key from the provider's panel.

API key

When to use

Later steps depend on earlier answers, something must be verified before going live, or people leave and come back.
Connecting a provider (credentials → test → go live), business verification, onboarding an account.
Keep the selected task in the URL with useTaskUrl so reload and Back reopen it.

Not for

A form someone fills in one sitting with no checks — keep it a plain form.
A chain of dialogs, or one long form in a dialog.

Props

Prop	Type	Description
tasks	OnboardingTask[]	The tasks in order — usually useSetupFlow(...).tasks. Rows need no handlers.
selected	string	The task on screen (controlled). Without it the view keeps its own.
onSelectTask	(key: string) => void	A row was pressed (after any “Discard changes?”).
url	{ value, set }	Keep the selected task in the URL: useTaskUrl() or your router's adapter.
title	ReactNode	The selected task's title.
description	ReactNode	One line under the title.
children	ReactNode	The task's form.
onBack	() => void	Back (outline, left). Asks first while dirty.
primaryAction	ReactNode	The one primary button: “Save and continue”, or the outcome on the last task.
footer	ReactNode	A footer of your own instead of Back + primary.
completed	boolean	Every task is complete; onComplete runs once.
onComplete	() => void	Go to the record's own page.
pending	boolean	A skeleton of both columns.
error	ReactNode	Loading failed: a critical Banner with Try again (onRetry).
dirty	boolean	Unsaved changes: switching task or going back asks first.
progressLabel	string Default `"Setup progress"`	The task list's progress label.