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
Split signup with features showcase panel.
No interactive demo is registered for this component yet — the source is shown directly.
/* ═══════════════════════════════════════════════════════════════
AUTH BLOCK — Layer 6 (Page Composition)
COMPOSITION PATTERN:
This block should compose L2 primitives (Button, Input, Card, Label)
and L3 brand components (nyuchi-auth-layout) rather than rendering
inline UI. The current implementation pre-dates the 3D architecture.
APPROVED FOR USE: Yes, as-is. Refactor is tracked for a future pass.
The inline code works correctly — the refactor is for architectural
purity, not functionality.
═══════════════════════════════════════════════════════════════ */
"use client"
import { useNyuchiHarness } from "@/lib/harness"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Check } from "@/lib/icons"
const features = [
"82 production-ready components",
"Five African Minerals design system",
"Accessible and theme-aware",
"Install via shadcn CLI",
]
function Signup03({ loading = false }: { loading?: boolean } = {}) {
const { log, motion, LiveRegion } = useNyuchiHarness("signup-03")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
return (
<div data-slot="signup-03" data-portal="https://design.nyuchi.com/components/signup-03" role="form" aria-label="Create account" className="flex min-h-screen bg-background">
{/* Left — features */}
<div className="hidden flex-1 flex-col justify-center bg-card p-12 lg:flex">
<h2 className="mb-2 font-serif text-3xl font-semibold text-foreground">
Build faster with mukoko
</h2>
<p className="mb-8 max-w-md text-sm text-muted-foreground">
Join thousands of developers building pan-African products with our design system.
</p>
<ul className="space-y-4">
{features.map((f) => (
<li key={f} className="flex items-center gap-3">
<div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-malachite/15">
<Check className="size-3.5 text-malachite" />
</div>
<span className="text-sm text-foreground">{f}</span>
</li>
))}
</ul>
</div>
{/* Right — form */}
<div className="flex flex-1 items-center justify-center border-l border-border px-6">
<div className="w-full max-w-sm space-y-6">
<div>
<h1 className="font-serif text-2xl font-semibold text-foreground">Create an account</h1>
<p className="mt-1 text-sm text-muted-foreground">Start building in minutes</p>
</div>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="signup03-name">Full name</Label>
<Input id="signup03-name" placeholder="Tanya Moyo" />
</div>
<div className="space-y-2">
<Label htmlFor="signup03-email">Email</Label>
<Input id="signup03-email" type="email" placeholder="you@example.com" />
</div>
<div className="space-y-2">
<Label htmlFor="signup03-password">Password</Label>
<Input id="signup03-password" type="password" placeholder="8+ characters" />
</div>
<Button className="w-full">Get started</Button>
</div>
<p className="text-center text-sm text-muted-foreground">
Already registered?{" "}
<a href="#" className="font-medium text-foreground hover:underline">
Sign in
</a>
</p>
</div>
</div>
</div>
)
}
export { Signup03 }
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/signup-03npx shadcn@latest add https://mzizi.dev/api/v1/ui/signup-03components/blocks/signup-03.tsx