Pro Components

Base Components

Config 2

Multi-step profile setup wizard with progress indicator, Basic Info, Contact, Social, and Review steps.

Example

Complete Your Profile

Help others get to know you better

1

Basic Info

2

Contact

3

Social

4

Review

?
File upload
@

Introduction

Config 2 is a profile setup wizard:
  • Progress indicator at the top: four steps (Basic Info, Contact, Social, Review) with numbers; completed steps show a checkmark.
  • Step 1 – Basic Info: Avatar, name, username, bio.
  • Step 2 – Contact: Email, phone.
  • Step 3 – Social: Website and social links.
  • Step 4 – Review: Summary of entered data.
  • Navigation: “Skip to review” on step 1, “Back” and “Continue” (or “Complete Setup” on the last step).
Uses Button, Input, Textarea, and Avatar. Good for onboarding or guided profile completion.

Usage

import { SettingsProfile6 } from "@/components/ui/settings-profile-6";

<SettingsProfile6 />
Connect the wizard to your profile API and add validation or submission on “Complete Setup” as needed.

On this page