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
Basic signup with name, email, and password fields.
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 {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
function Signup01({ loading = false }: { loading?: boolean } = {}) {
const { log, motion, LiveRegion } = useNyuchiHarness("signup-01")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
return (
<div data-slot="signup-01" data-portal="https://design.nyuchi.com/components/signup-01" role="form" aria-label="Create account" className="flex min-h-screen items-center justify-center bg-background px-4">
<Card className="w-full max-w-sm">
<CardHeader className="text-center">
<CardTitle className="font-serif text-xl">Create your account</CardTitle>
<CardDescription>Get started with mukoko in seconds</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="signup01-first">First name</Label>
<Input id="signup01-first" placeholder="Tanya" />
</div>
<div className="space-y-2">
<Label htmlFor="signup01-last">Last name</Label>
<Input id="signup01-last" placeholder="Moyo" />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="signup01-email">Email</Label>
<Input id="signup01-email" type="email" placeholder="you@example.com" />
</div>
<div className="space-y-2">
<Label htmlFor="signup01-password">Password</Label>
<Input id="signup01-password" type="password" placeholder="Create a password" />
<p className="text-xs text-muted-foreground">Must be at least 8 characters</p>
</div>
<Button className="w-full">Create account</Button>
</CardContent>
<CardFooter className="justify-center">
<p className="text-sm text-muted-foreground">
Already have an account?{" "}
<a href="#" className="font-medium text-foreground hover:underline">
Sign in
</a>
</p>
</CardFooter>
</Card>
</div>
)
}
export { Signup01 }
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-01npx shadcn@latest add https://mzizi.dev/api/v1/ui/signup-01components/blocks/signup-01.tsx