Multi step form example

multi-step form using the snippet below:<nav aria-label="Progress"> <ol role="list" class="overflow-hidden"> <li class="relative pb-10"> <div aria-hidden="true" class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-indigo-600"></div>  <a href="#" class="group relative flex items-start"> <span class="flex h-9 items-center"> <span class="relative z-10 flex size-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"> <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 text-white"> <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" /> </svg> </span> </span> <span class="ml-4 flex min-w-0 flex-col"> <span class="text-sm font-medium">Create account</span> <span class="text-sm text-gray-500">Vitae sed mi luctus laoreet.</span> </span> </a> </li> <li class="relative pb-10"> <div aria-hidden="true" class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"></div>  <a href="#" aria-current="step" class="group relative flex items-start"> <span aria-hidden="true" class="flex h-9 items-center"> <span class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"> <span class="size-2.5 rounded-full bg-indigo-600"></span> </span> </span> <span class="ml-4 flex min-w-0 flex-col"> <span class="text-sm font-medium text-indigo-600">Profile information</span> <span class="text-sm text-gray-500">Cursus semper viverra facilisis et et some more.</span> </span> </a> </li> <li class="relative pb-10"> <div aria-hidden="true" class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"></div>  <a href="#" class="group relative flex items-start"> <span aria-hidden="true" class="flex h-9 items-center"> <span class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"> <span class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"></span> </span> </span> <span class="ml-4 flex min-w-0 flex-col"> <span class="text-sm font-medium text-gray-500">Business information</span> <span class="text-sm text-gray-500">Penatibus eu quis ante.</span> </span> </a> </li> <li class="relative pb-10"> <div aria-hidden="true" class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"></div>  <a href="#" class="group relative flex items-start"> <span aria-hidden="true" class="flex h-9 items-center"> <span class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"> <span class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"></span> </span> </span> <span class="ml-4 flex min-w-0 flex-col"> <span class="text-sm font-medium text-gray-500">Theme</span> <span class="text-sm text-gray-500">Faucibus nec enim leo et.</span> </span> </a> </li> <li class="relative">  <a href="#" class="group relative flex items-start"> <span aria-hidden="true" class="flex h-9 items-center"> <span class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"> <span class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"></span> </span> </span> <span class="ml-4 flex min-w-0 flex-col"> <span class="text-sm font-medium text-gray-500">Preview</span> <span class="text-sm text-gray-500">Iusto et officia maiores porro ad non quas.</span> </span> </a> </li> </ol></nav>Use best ui/ux practices

Show full message

48d ago

I've created a comprehensive multi-step form that follows best UI/UX practices:

Key Features:

Progress Navigation:

Visual progress indicator with completed, current, and upcoming states
Clickable steps (only completed and current steps are accessible)
Clear visual hierarchy with icons and connecting lines

Form Structure:

5 logical steps: Account creation, Profile, Business info, Theme preferences, and Preview
Responsive grid layout that stacks on mobile
Clean card-based design for the form content

UX Best Practices:

State Management: Form data persists across steps
Navigation: Previous/Next buttons with appropriate disabled states
Accessibility: Proper ARIA labels, semantic HTML, and keyboard navigation
Visual Feedback: Clear indication of current step and completion status
Validation Ready: Structure supports easy addition of form validation
Responsive Design: Works well on all screen sizes

Form Content:

Step 1: Account credentials
Step 2: Personal information
Step 3: Business details with dropdowns
Step 4: Theme preferences and notifications
Step 5: Review summary of all entered data

The design maintains the visual style from your snippet while adding full functionality and modern React patterns.

48d ago

make it like linear app

48d ago

I've completely redesigned the multi-step form to match Linear's aesthetic:

Key Linear-inspired Design Elements:

Visual Design:

Dark theme with gradient background (gray-900 to gray-800)
Purple accent colors instead of indigo, matching Linear's brand
Subtle glassmorphism with backdrop blur and transparency
Clean typography with proper hierarchy and spacing
Minimal borders and subtle shadows

Layout & Navigation:

Sticky sidebar with step navigation (like Linear's sidebar)
Icon-based steps with meaningful icons for each section
Card-based content with subtle background and borders
Better responsive grid (4/8 columns on large screens)

Form Styling:

Dark form inputs with purple focus states
Custom select dropdowns with dark theme
Enhanced radio buttons with card-like containers
Improved checkboxes with descriptions and better layout
Gradient buttons with smooth hover effects

UX Improvements:

Visual feedback with completion states and hover effects
Better content organization with proper spacing
Enhanced final step with celebration design and summary cards
Smooth transitions and hover states throughout

Linear-specific Features:

Team-focused language (workspace, team setup)
Professional form fields (work email, role, team size)
Modern notification preferences with detailed descriptions
Clean review section with organized information cards

The design now feels much more like Linear's clean, professional, and modern interface while maintaining excellent usability and accessibility.

48d ago

add top navigation with logo and everything

48d ago

components

header.tsx

WorkingWorking...

Working...

I've created a comprehensive multi-step form that follows best UI/UX practices:

Key Features:

Progress Navigation:

Visual progress indicator with completed, current, and upcoming states
Clickable steps (only completed and current steps are accessible)
Clear visual hierarchy with icons and connecting lines

Form Structure:

5 logical steps: Account creation, Profile, Business info, Theme preferences, and Preview
Responsive grid layout that stacks on mobile
Clean card-based design for the form content

UX Best Practices:

State Management: Form data persists across steps
Navigation: Previous/Next buttons with appropriate disabled states
Accessibility: Proper ARIA labels, semantic HTML, and keyboard navigation
Visual Feedback: Clear indication of current step and completion status
Validation Ready: Structure supports easy addition of form validation
Responsive Design: Works well on all screen sizes

Form Content:

Step 1: Account credentials
Step 2: Personal information
Step 3: Business details with dropdowns
Step 4: Theme preferences and notifications
Step 5: Review summary of all entered data

The design maintains the visual style from your snippet while adding full functionality and modern React patterns.

48d ago

make it like linear app

48d ago

I've completely redesigned the multi-step form to match Linear's aesthetic:

Key Linear-inspired Design Elements:

Visual Design:

Dark theme with gradient background (gray-900 to gray-800)
Purple accent colors instead of indigo, matching Linear's brand
Subtle glassmorphism with backdrop blur and transparency
Clean typography with proper hierarchy and spacing
Minimal borders and subtle shadows

Layout & Navigation:

Sticky sidebar with step navigation (like Linear's sidebar)
Icon-based steps with meaningful icons for each section
Card-based content with subtle background and borders
Better responsive grid (4/8 columns on large screens)

Form Styling:

Dark form inputs with purple focus states
Custom select dropdowns with dark theme
Enhanced radio buttons with card-like containers
Improved checkboxes with descriptions and better layout
Gradient buttons with smooth hover effects

UX Improvements:

Visual feedback with completion states and hover effects
Better content organization with proper spacing
Enhanced final step with celebration design and summary cards
Smooth transitions and hover states throughout

Linear-specific Features:

Team-focused language (workspace, team setup)
Professional form fields (work email, role, team size)
Modern notification preferences with detailed descriptions
Clean review section with organized information cards

The design now feels much more like Linear's clean, professional, and modern interface while maintaining excellent usability and accessibility.

48d ago

add top navigation with logo and everything

48d ago

components

header.tsx

WorkingWorking...

Working...