Floating continue

The dynamic-forms navigation pill — Back · Start over · Next in a floating bottom bar. Back and Next carry keyboard-shortcut tooltips (⇧ B / ⇧ N), and Start over confirms inline with a two-step popover anchored to the bar.

Step 1 of 3
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/floating-continue-v2.json
Usage
Render it inside the form — it floats bottom-center on its own.
TSImport
import { FloatingContinueV2 } from "@/components/blocks/floating-continue-v2";
TSExample
import { FloatingContinueV2 } from "@/components/blocks/floating-continue-v2";

export function FormNav({ step, total }: { step: number; total: number }) {
  return (
    <FloatingContinueV2
      isFirstStep={step === 0}
      isLastStep={step === total - 1}
      onBack={() => console.log("back")}
      onNext={() => console.log("next / submit")}
      onStartOver={() => console.log("reset")}
    />
  );
}
API Reference
Props for FloatingContinueV2.
PropTypeDefaultDescription
onBack() => void—Back handler. Back is disabled when isFirstStep.
onNext() => void—Primary handler — Next, or Submit on the last step.
onStartOver() => void—Reset handler. Omit to hide the Start over button.
isFirstStepbooleanfalseDisable + grey out Back.
isLastStepbooleanfalsePrimary reads "Submit" with a send icon.
isSubmittingbooleanfalseSpinner + disabled primary while submitting.
isNextDisabledbooleanfalseDisable the primary action.
floatingbooleantrueRender as a fixed bottom-centered bar.
visiblebooleantrueWhen floating, controls slide + fade in/out.