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
Universal branded onboarding step card used across all ecosystem app first-use experiences. Shows an illustration area, title, description, progress dots, and next/skip actions. Dynamic mineral accent. The individual step within any onboarding flow — composable with swiper or stepper primitives for multi-step sequences.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
/* ═══════════════════════════════════════════════════════════════
NYUCHI ONBOARDING STEP — Universal Brand Component (Pre-Wired)
Individual onboarding step — composable into flows.
Dynamic mineral accent. Progress dots for multi-step.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface NyuchiOnboardingStepProps {
/** Illustration or emoji */
illustration?: React.ReactNode
/** Step title */
title: string
/** Step description */
description: string
/** Current step index (0-based) */
currentStep?: number
/** Total number of steps */
totalSteps?: number
/** Next button label */
nextLabel?: string
/** Skip button label */
skipLabel?: string
/** Next handler */
onNext?: () => void
/** Skip handler */
onSkip?: () => void
className?: string
}
export function NyuchiOnboardingStep({
illustration,
title,
description,
currentStep = 0,
totalSteps = 1,
nextLabel = "Next",
skipLabel = "Skip",
onNext,
onSkip,
className,
}: NyuchiOnboardingStepProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("onboarding-step")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
const isLast = currentStep >= totalSteps - 1
return (
<div data-slot="nyuchi-onboarding-step" data-portal="https://design.nyuchi.com/components/nyuchi-onboarding-step" role="region" aria-label="Onboarding" className={cn("flex flex-col items-center justify-center text-center px-6 py-12", className)}>
{illustration && (
<div className="mb-8 flex size-24 items-center justify-center rounded-full bg-[var(--brand-accent,var(--color-malachite,#64FFDA))]/10 text-4xl">
{illustration}
</div>
)}
<h2 className="text-xl font-bold text-foreground" style={{ fontFamily: "var(--font-serif)" }}>{title}</h2>
<p className="mt-3 text-sm text-muted-foreground leading-relaxed max-w-[300px]">{description}</p>
{/* Progress dots */}
{totalSteps > 1 && (
<div className="mt-6 flex items-center gap-2">
{Array.from({ length: totalSteps }).map((_, i) => (
<div key={i} className={cn("rounded-full transition-all", i === currentStep ? "h-2 w-6 bg-[var(--brand-accent,var(--color-malachite,#64FFDA))]" : "size-2 bg-muted-foreground/20")} />
))}
</div>
)}
{/* Actions */}
<div className="mt-8 flex flex-col items-center gap-3 w-full max-w-[280px]">
{onNext && (
<button onClick={onNext} className="flex h-14 w-full items-center justify-center rounded-full bg-[var(--brand-accent,var(--color-malachite,#64FFDA))] text-[#0A0A0A] text-[15px] font-semibold transition-opacity hover:opacity-80">
{isLast ? "Get Started" : nextLabel}
</button>
)}
{onSkip && !isLast && (
<button onClick={onSkip} className="text-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] hover:text-foreground transition-colors">
{skipLabel}
</button>
)}
</div>
</div>
)
}
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/nyuchi-onboarding-stepnpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-onboarding-step