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.
React useStep Hook preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-step hook into my projectRelated 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.