Develop an onboarding flow for new organization creation, structured in three distinct steps. The first step should gather essential organization details: the organization's name, a unique slug (automatically generated from the organization name but editable by the user), a brief description, and an image upload field. The second step should facilitate inviting members to the organization. The third step should collect user-specific information, including their role within the organization (e.g., Engineering, QA, Support, Product) and the organization's size. Design the onboarding layout with the following specifications: Layout Configuration: Utilize a vertically stacked list format. Framing: Enclose each step within a card component, applying padding and a subtle shadow. Visual Style: Implement a minimalist design aesthetic. Color Scheme: Employ light mode colors. Accent Color: Use Tailwind's blue-500. Background Color: Set the background to transparent using Tailwind's 100 class. Border Color: Apply a gray-200 border using Tailwind. Shadow: Use a small shadow (shadow-sm). Typography: Use a sans-serif font family. Headings: Use the Inter font for all headings.
I'll create a comprehensive onboarding flow for organization creation with three distinct steps, following your minimalist design specifications.
I've created a comprehensive three-step organization onboarding flow that meets all your specifications:
Key Features:
Step 1 - Organization Details:
- Organization name input with automatic slug generation
- Editable slug field with preview
- Description textarea
- Image upload with drag-and-drop styling
- Form validation to ensure required fields are completed
Step 2 - Member Invitations:
- Email input with add button
- List of invited members with remove functionality
- Enter key support for quick adding
- Optional step (can be skipped)
Step 3 - User Information:
- Role selection dropdown (Engineering, QA, Support, Product, etc.)
- Organization size selection
- Form validation for required fields
Design Implementation:
✅ Layout: Vertically stacked cards with proper spacing ✅ Styling: Minimalist design with clean typography ✅ Colors: Light mode with blue-500 accents, gray-200 borders ✅ Background: Light gray background (bg-gray-50) ✅ Cards: White background with shadow-sm and proper padding ✅ Typography: Sans-serif with Inter font for headings ✅ Interactive Elements: Proper hover states and focus indicators
The component includes progress tracking, form validation, and smooth navigation between steps. All form data is properly managed in state and ready for submission to your backend API.
I'll update the stepper to match the design in your image, with circular step indicators showing completed, current, and upcoming steps.
I've updated the stepper to match your design exactly:
- Step text: Shows "Step X of 3" on the left
- Completed steps: Solid blue circles (blue-500)
- Current step: Light blue fill with blue border (blue-100 background with blue-500 border)
- Future steps: Gray circles (gray-300)
- Smooth transitions: Added transition effects for state changes
The stepper now provides clear visual feedback about progress through the onboarding flow, with the current step highlighted by the distinctive border treatment shown in your reference image.