Components
ProgressiveStepTabs
This Progressive Step Tabs component transforms a standard tab interface into a workflow-friendly, multi-step experience. Each tab represents a step: completed steps show a checkmark ✅, the current step is highlighted, and future steps are dimmed, giving clear visual guidance. A thin, animated progress line dynamically grows beneath the tabs as the user advances, providing a smooth, intuitive sense of progression. This makes the component ideal for onboarding flows, multi-step forms, or any scenario where guiding users through sequential tasks is important, while maintaining a clean, modern, and visually engaging design.
Loading preview...
import ProgressiveStepTabs from "@/components/ui/progressive-step-tabs";
export default function DemoOne() {
const steps = [
{ value: "step1", label: "Info", content: "Step 1: Enter information" },
{ value: "step2", label: "Address", content: "Step 2: Enter address" },
{ value: "step3", label: "Payment", content: "Step 3: Payment details" },
{ value: "step4", label: "Confirm", content: "Step 4: Confirm details" },
];
return (
<div>
<ProgressiveStepTabs items={steps} currentStep={1} />
</div>
);
}