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
Standard error page for 404, 500, and 503 states with mineral accent.
No interactive demo is registered for this component yet — the source is shown directly.
import { Button } from "@/components/ui/button"
import { ArrowLeft, Home } from "@/lib/icons"
interface ErrorPageProps {
code?: 404 | 500 | 503
title?: string
description?: string
}
function ErrorPage({ code = 404, title, description }: ErrorPageProps) {
const defaults: Record<number, { title: string; description: string }> = {
404: {
title: "Page not found",
description: "The page you are looking for does not exist or has been moved.",
},
500: {
title: "Something went wrong",
description: "An unexpected error occurred. Our team has been notified.",
},
503: {
title: "Service unavailable",
description: "We are performing maintenance. Please try again shortly.",
},
}
const resolvedTitle = title ?? defaults[code]?.title ?? "Error"
const resolvedDescription = description ?? defaults[code]?.description ?? "An error occurred."
return (
<div data-slot="error-page" data-portal="https://design.nyuchi.com/components/error-page" role="alert" aria-live="assertive" className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
<div className="text-center">
{/* Mukoko logo mark */}
<div className="mx-auto mb-6 flex size-12 items-center justify-center rounded-[var(--radius-xl,17px)] bg-muted">
<span className="font-serif text-xl font-bold text-cobalt">m</span>
</div>
{/* Error code */}
<p className="text-[8rem] leading-none font-bold text-muted-foreground/20 sm:text-[12rem]">
{code}
</p>
{/* Title and description */}
<h1 className="-mt-4 font-serif text-2xl font-semibold text-foreground sm:text-3xl">
{resolvedTitle}
</h1>
<p className="mt-2 max-w-md text-sm text-muted-foreground">{resolvedDescription}</p>
{/* Actions */}
<div className="mt-8 flex items-center justify-center gap-3">
<Button variant="outline" asChild>
<a href="javascript:history.back()">
<ArrowLeft className="size-4" />
Go back
</a>
</Button>
<Button asChild>
<a href="/">
<Home className="size-4" />
Go home
</a>
</Button>
</div>
</div>
{/* Mineral accent at bottom */}
<div className="fixed bottom-0 left-0 flex h-1 w-full">
<div className="flex-1 bg-cobalt" />
<div className="flex-1 bg-tanzanite" />
<div className="flex-1 bg-malachite" />
<div className="flex-1 bg-gold" />
<div className="flex-1 bg-terracotta" />
</div>
</div>
)
}
export { ErrorPage }
export type { ErrorPageProps }
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/error-pagenpx shadcn@latest add https://mzizi.dev/api/v1/ui/error-pagecomponents/blocks/error-page.tsx