Stepper Component
Stepper is a UI component for guiding users through multi-step processes, such as onboarding, forms, or wizards. It visually represents progress and helps users navigate through steps efficiently.
Features
-
Customizable Steps: Supports dynamic step labels and icons.
-
Progress Indication: Highlights the active step and completed steps.
-
Keyboard & Click Navigation: Users can navigate using clicks or keyboard shortcuts.
-
Responsive Design: Adapts to different screen sizes.
Usage
import Stepper from "@/components/Stepper";
const steps = ["Step 1", "Step 2", "Step 3"];
export default function Example() {
return <Stepper steps={steps} currentStep={1} />;
}This component is ideal for multi-step workflows, ensuring a smooth and structured user experience.