nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Horizontal step progress indicator for multi-step flows. Shows current progress as filled/unfilled segments. Extracted from payment-page, checkout-page, booking-page, and verification-page. Brand-agnostic.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface StepProgressProps {
steps: string[]
currentStep: number
className?: string
}
export function StepProgress({ steps, currentStep, className }: StepProgressProps) {
return (
<nav data-slot="step-progress" data-portal="https://design.nyuchi.com/components/step-progress" aria-label="Progress" className={cn("flex gap-1", className)}>
{steps.map((step, i) => (
<div key={step} className={cn("h-1 flex-1 rounded-full transition-colors", i <= currentStep ? "bg-primary" : "bg-muted")}
role="progressbar" aria-valuenow={i <= currentStep ? 100 : 0} aria-label={step} />
))}
</nav>
)
}
export type { StepProgressProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/step-progressFetch this component's metadata and source code from the registry API.
/api/v1/ui/step-progress