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。在内存中持久化步骤数据。

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