1 variants

Step Form

A long form broken into steps that validate as you leave them, with a way back that never traps anyone and a last look before sending.

Wizard

One card with a segmented bar across the top. Steps slide in from the side they came from, and it ends on a review page where every answer can be edited.

Start a project

Three short steps. It takes about a minute.

page.tsx

import { StepFormWizard } from "@/components/blocks/step-form-wizard";

export default function Page() {
  return (
    <StepFormWizard
      title="Start a project"
      steps={[
        {
          id: "about",
          title: "About you",
          fields: [
            { name: "name", label: "Full name", required: true },
            { name: "email", label: "Work email", type: "email", required: true },
          ],
        },
      ]}
      onSubmit={async (values) => {
        await fetch("/api/leads", { method: "POST", body: JSON.stringify(values) });
      }}
    />
  );
}

"use client";

import { ArrowLeft, ArrowRight, Check } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type FormEvent, useState } from "react";
import {
  type FormStep,
  StepFieldControl,
  StepReview,
  type StepValues,
  useMeasuredHeight,
  useStepForm,

242 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/step-form-wizard