proNew234 lines · framer-motion

Auth Sign Up Steps

Account, workspace, confirm — one step at a time. A three-step sign-up wizard (account, workspace name, review) with a progress rail at the top that fills in as you go, per-step validation, and a styled success state on the final confirm — no network.

Use it for: A sign-up flow with more than one piece of information to collect, where a single long form would feel heavier than it needs to and a short wizard reads as faster.
Themes: Light + dark
License: Commercial use

Live

Create account

Set up your workspace

Password

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface AuthSignUpStepsProps {
  eyebrow?: string;
  title?: string;
  buttonLabel?: string;
  successTitle?: string;
  successBody?: string;
  className?: string;
}

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each step validates its own fields before 'Continue' is allowed to advance; failing fields show an inline error and the step does not change.
→The progress rail's connecting segments fill from border to ok-coloured as each step is completed, and the current step's dot is highlighted in the signal colour.
→The review step shows exactly what was entered, including a masked password, before the final confirm.
→Step transitions slide and cross-fade; under prefers-reduced-motion they cut directly with no slide.

Accessibility

✓Every field keeps a real `<label>` across all three steps; errors are plain text under the field, not colour-only.
✓The final success panel has `role="status"` and `aria-live="polite"`.
✓Back/Continue are always real, labelled buttons; Back is disabled (not hidden) on the first step so focus order stays stable.
✓Honours prefers-reduced-motion.