Prodular UI

Onboarding

Pro

A focused setup flow: a stepper across four steps, the current step's form in one card and a checklist rail with progress and a person to ask for help.

Open full screen
Onboarding screen from Prodular UI

Install

The screen lands in app/onboarding/ with every component it uses. Change it like any other code in your app. It is part of Prodular UI Pro, so run npx prodular-ui login first. See pricing.

npx prodular-ui add onboarding

States

The screen ships with 5 states. Pick one with the tabs above the preview, with ?state= in the URL, or with the state prop from your app.

  • Default
  • First step
  • Importing
  • Import errors
  • Done

Files

  • app/onboarding/page.tsx
  • app/onboarding/states.tsx
  • app/onboarding/steps.tsx
  • app/onboarding/relay-logo.tsx