Blocks
Onboarding Stepper Block
A multi-step onboarding wizard with a hand-drawn progress bar and timeline steps.
Get started
Setup progress0%
- Create your account
Enter your email and set a password.
- Pick a theme
Choose between pencil, ink, or crayon.
- Install components
Run the CLI to copy components into your project.
- You're all set!
Start building with byDefaultHuman.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/onboarding-stepper.jsonProps
PropTypeDefaultDescription
onComplete() => void—
Callback fired when the final step completes.
onStepChange(stepIndex: number) => void—
Callback fired when the active step changes.
stepsOnboardingStep[]—
Stepper steps rendered in order.
titlestring—
Block heading text.
Accessibility
This block is composed from accessible byDefaultHuman components. Preserve visible labels, button text, and supporting copy when adapting it so the layout remains understandable without the visual styling.
Examples
import { OnboardingStepperBlock } from "@/components/block/OnboardingStepperBlock";
<OnboardingStepperBlock />;