Shadcn.io is not affiliated with official shadcn/ui
React useStep Hook
React useStep hook for multi-step wizard navigation. Next/prev with bounds checking, reset, jump to step. TypeScript ready.
Build multi-step wizards and onboarding flows with useStep. Returns current step number plus navigation helpers with automatic bounds checking. Navigate with goToNextStep and goToPrevStep, jump to any step with setStep, or reset to start. canGoToNextStep and canGoToPrevStep booleans for button states. Steps are 1-indexed and bounded by maxStep. Invalid step jumps throw errors to catch logic bugs early. All navigation functions are memoized for stable references. Perfect for checkout flows, form wizards, onboarding tours, setup guides, or any sequential UI. SSR safe—just React state. Works with Next.js App Router.
React useStep Hook preview
Installation
Related Components
React useCounter Hook
Counter with min/max bounds
React useBoolean Hook
Boolean state with helpers
React useToggle Hook
Toggle between values
React useSessionStorage Hook
Persist wizard progress
React useLocalStorage Hook
Permanent progress storage
React useScrollLock Hook
Lock scroll during steps
FAQ
Was this page helpful?
Sign in to leave feedback.