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
Social and email signup with terms checkbox.
View the full component source code below.
/* ═══════════════════════════════════════════════════════════════
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 { useState } from "react"
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"
import { Separator } from "@/components/ui/separator"
function GithubIcon({ loading = false, className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
)
}
function Signup05() {
const { log, motion, LiveRegion } = useNyuchiHarness("signup-05")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
const [agreed, setAgreed] = useState(false)
return (
<div data-slot="signup-05" data-portal="https://design.nyuchi.com/components/signup-05" 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">Join mukoko</CardTitle>
<CardDescription>Create a free account to get started</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-3">
<Button variant="outline" className="w-full gap-2">
<svg className="size-4" viewBox="0 0 24 24" fill="none">
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
fill="#4285F4"
/>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#34A853"
/>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
fill="#FBBC05"
/>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
fill="#EA4335"
/>
</svg>
Google
</Button>
<Button variant="outline" className="w-full gap-2">
<GithubIcon className="size-4" />
GitHub
</Button>
</div>
<div className="flex items-center gap-3">
<Separator className="flex-1" />
<span className="text-xs text-muted-foreground">or continue with email</span>
<Separator className="flex-1" />
</div>
<div className="space-y-2">
<Label htmlFor="signup05-name">Full name</Label>
<Input id="signup05-name" placeholder="Tanya Moyo" />
</div>
<div className="space-y-2">
<Label htmlFor="signup05-email">Email</Label>
<Input id="signup05-email" type="email" placeholder="you@example.com" />
</div>
<div className="space-y-2">
<Label htmlFor="signup05-password">Password</Label>
<Input id="signup05-password" type="password" placeholder="8+ characters" />
</div>
<label className="flex items-start gap-2">
<input
type="checkbox"
checked={agreed}
onChange={(e) => setAgreed(e.target.checked)}
className="mt-0.5 size-4 rounded border-border accent-cobalt"
/>
<span className="text-xs text-muted-foreground">
I agree to the{" "}
<a href="#" className="text-foreground underline">
Terms of Service
</a>{" "}
and{" "}
<a href="#" className="text-foreground underline">
Privacy Policy
</a>
</span>
</label>
<Button className="w-full" disabled={!agreed}>
Create account
</Button>
</CardContent>
<CardFooter className="justify-center">
<p className="text-sm text-muted-foreground">
Have an account?{" "}
<a href="#" className="font-medium text-foreground hover:underline">
Sign in
</a>
</p>
</CardFooter>
</Card>
</div>
)
}
export { Signup05 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/signup-05Fetch this component's metadata and source code from the registry API.
/api/v1/ui/signup-05components/blocks/signup-05.tsx