Pro Components

Base Components

Onboarding Flow Page

Multi-step onboarding flow with account setup, business details, and billing.

Example

Acme Inc.

Account TypeStep 1 of 5

Choose Account Type

Select the type that best fits your use case.

Introduction

Onboarding Flow Page includes:

Cover Panel: Branded side panel with visual context on large screens.
Step Indicator: Progress indicator across the onboarding steps.
Account Type: Choice between personal and corporate accounts.
Account Info: Team size, team name, and plan selection.
Business Details: Company name, industry, and website.
Billing Details: Card details with save-for-future toggle.
Success: Summary screen with account recap.

Uses Button, Input, Label, RadioGroup, Select, Switch, and Separator.

Usage

import { OnboardingFlowPage } from "@/components/ui/onboardingflow-page";

<OnboardingFlowPage />;