Component Snippet to allow progressing forward and backward with slide-in animation like in iOS.

slide-in-transition.tsx

function Flow() {
  const steps = ['new account', 'enter OTP', 'add pfp', 'add bio...' ] // The names doesn't matter, as long as its an array
  const [step, setStep] = useState(0)

  const handleNextStep = () => {
    if(step < steps.length - 1) // limit max steps
      setStep(prev => prev + 1)
  }

  const handlePrevStep = () => {
    if(step > 0) // limit min steps
     setStep(prev => prev - 1)
  }

  const className = cn(
    "absolute top-8 left-0 bg-black w-full h-full", // move down abit to show the buttons
    "transition-all",
    "duration-500",
    "data-[show=false]:translate-x-full",
    "data-[show=true]:opacity-100",
    "data-[show=true]:data-[finished=false]:opacity-100",
    "data-[show=true]:data-[finished=true]:opacity-0",
    "data-[show=true]:data-[finished=true]:scale-75",
  )

  return (
    <div className="w-full h-full relative">
      <div onClick={ handlePrevStep } className="cursor-pointer select-none">Backward</div>
      <div onClick={ handleNextStep } className="cursor-pointer select-none">Forward</div>
      <div
        className={ className }
        data-show={ step >= 0 }
        data-finished={ step > 0 }
      >
        1
      </div>
      <div
        className={ className }
        data-show={ step >= 1 }
        data-finished={ step > 1 }
      >
        2
      </div>
      <div
        className={ className }
        data-show={ step >= 2 }
        data-finished={ step > 2 }
      >
        3
      </div>
      <div
        className={ className }
        data-show={ step >= 3 }
        data-finished={ step > 3 }
      >
        4
      </div>
      {/* Repeat as much steps/screens you have */}
    </div>
  )
}