← Back to Prompts
Forms

Multi-step Wizard

A multi-step form wizard with progress indicator, step validation, and navigation.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a 3-step wizard for onboarding. Step 1: Account info (name, email). Step 2: Workspace details (workspace name, team size). Step 3: Preferences (theme, notifications). Include a progress stepper at the top, previous/next buttons, step validation before advancing, and a success screen at the end. Use shadcn/ui Card, Button, Input, Select, and Progress components and Tailwind CSS. Persist step data in memory.
Chinese Prompt
创建一个 3 步入职向导。第 1 步:账户信息(姓名、邮箱)。第 2 步:工作区详情(工作区名称、团队规模)。第 3 步:偏好设置(主题、通知)。顶部包含进度步骤条、上一步/下一步按钮、进入下一步前的步骤验证以及最后的成功页面。使用 shadcn/ui Card、Button、Input、Select 和 Progress 组件以及 Tailwind CSS。在内存中持久化步骤数据。
Multi-step Wizard screenshot 1
## Overview A multi-step form wizard that breaks complex forms into manageable steps. Includes validation and progress tracking. ## Features - 3-step onboarding flow - Progress stepper - Previous/Next navigation - Per-step validation - Success completion screen - Responsive card layout ## Usage Copy the prompt into v0 or Cursor. Replace the steps with your onboarding or checkout flow. ## Customization Modify the prompt to: - Add step summary review - Persist data to localStorage - Support branching logic - Add animated transitions between steps