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
Default auth screen layout that services all login, signup, and onboarding flows. Provides the branded container: centered card with mineral gradient background, Mukoko logo, language selector, and legal links. Individual auth flows (login-01..05, signup-01..05) render inside this layout as children.
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 AUTH LAYOUT — Layer 6 Page Composition
Default screen that wraps all auth flows.
═══════════════════════════════════════════════════════════════ */
interface NyuchiAuthLayoutProps {
children: React.ReactNode
/** Which auth step is being displayed */
variant?: "login" | "signup" | "onboarding" | "reset" | "verify"
/** Show the mineral gradient background */
showBackground?: boolean
/** Show the logo */
showLogo?: boolean
/** Show language selector */
showLanguage?: boolean
/** Show legal links (terms, privacy) */
showLegal?: boolean
/** Available languages */
languages?: { code: string; label: string }[]
onLanguageChange?: (code: string) => void
loading?: boolean
className?: string
}
const DEFAULT_LANGUAGES = [
{ code: "en", label: "English" },
{ code: "sn", label: "chiShona" },
{ code: "nd", label: "isiNdebele" },
{ code: "sw", label: "Kiswahili" },
{ code: "fr", label: "Français" },
{ code: "pt", label: "Português" },
]
export function NyuchiAuthLayout({
children, variant = "login", showBackground = true, showLogo = true,
showLanguage = true, showLegal = true, languages = DEFAULT_LANGUAGES,
onLanguageChange, loading = false, className,
}: NyuchiAuthLayoutProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("auth-layout")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
return (
<div data-slot="nyuchi-auth-layout" data-portal="https://design.nyuchi.com/components/nyuchi-auth-layout" data-variant={variant} role="main" aria-label={variant === "login" ? "Sign in" : variant === "signup" ? "Create account" : variant}
className={cn("flex min-h-screen flex-col items-center justify-center p-4", showBackground && "bg-gradient-to-br from-background via-background to-primary/5", className)}>
{/* Logo */}
{showLogo && (
<div className="mb-8" style={animStyle}>
<p className="text-2xl font-bold tracking-tight">
<span className="text-foreground">mukoko</span>
</p>
</div>
)}
{/* Auth card container */}
<div className="w-full max-w-md" style={animStyle}>
<div className="rounded-[var(--radius-xl,17px)] bg-card p-6 border border-border shadow-lg sm:p-8">
{loading ? (
<div className="space-y-4 animate-pulse" role="status" aria-label="Loading">
<div className="h-8 w-2/3 rounded bg-muted" />
<div className="h-10 rounded bg-muted" />
<div className="h-10 rounded bg-muted" />
<div className="h-12 rounded-full bg-muted" />
</div>
) : children}
</div>
</div>
{/* Language selector */}
{showLanguage && (
<div className="mt-6 flex flex-wrap justify-center gap-2" style={animStyle}>
{languages.map((lang) => (
<button key={lang.code} onClick={() => onLanguageChange?.(lang.code)}
className="rounded-full px-3 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] min-h-[44px]">
{lang.label}
</button>
))}
</div>
)}
{/* Legal links */}
{showLegal && (
<div className="mt-4 flex gap-4 text-xs text-muted-foreground/60">
<a href="/legal/terms" className="transition-colors hover:text-muted-foreground">Terms</a>
<a href="/legal/privacy" className="transition-colors hover:text-muted-foreground">Privacy</a>
<a href="/legal/cookies" className="transition-colors hover:text-muted-foreground">Cookies</a>
</div>
)}
</div>
)
}
export type { NyuchiAuthLayoutProps }
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-auth-layoutnpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-auth-layoutcomponents/ui/nyuchi-auth-layout.tsx