Account Setup
Enter your credentials
2
Team Details
Invite your colleagues
3
Payment
Add billing info
4
Complete
You are ready to go!
Overview
A Stepper (or Wizard) is essential for breaking down complex forms, onboarding flows, or checkout processes into digestible chunks.
This component features smooth scaleX and scaleY line animations that connect the nodes as progress is made, pulsing active states to draw the user's eye, and support for both horizontal desktop layouts and vertical mobile layouts.
Usage
import { useState } from "react"
import { Stepper } from "@/components/creative/stepper"
export default function Onboarding() {
const [step, setStep] = useState(0)
const steps = [
{ id: '1', label: "Profile", description: "Set up your avatar" },
{ id: '2', label: "Security", description: "Configure 2FA" },
{ id: '3', label: "Done" }
]
return (
<div className="w-full max-w-3xl mx-auto py-12">
<Stepper steps={steps} currentStep={step} direction="horizontal" />
{/* Your form content based on `step` */}
</div>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { Stepper } from "@/components/creative/stepper";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { Stepper } from "@/components/creative/stepper";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<Stepper
steps{/* value */}
currentStep{10}
direction{/* value */}
/>
</div>
);
}