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 empty state screen for pages with no content yet. Used across mini-apps when a feed, list, or section has zero items. Branded illustration placeholder, message, and optional CTA.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
interface NyuchiEmptyScreenProps {
title?: string
description?: string
icon?: React.ReactNode
action?: { label: string; onClick: () => void }
className?: string
}
export function NyuchiEmptyScreen({
title = "Nothing here yet", description = "Content will appear here once it is available.",
icon, action, className,
}: NyuchiEmptyScreenProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("empty-screen")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
return (
<div data-slot="nyuchi-empty-screen" data-portal="https://design.nyuchi.com/components/nyuchi-empty-screen" role="status" style={animStyle}
className={cn("flex flex-col items-center justify-center py-16 px-6 text-center", className)}>
<div className="flex size-16 items-center justify-center rounded-full bg-muted">
{icon || (
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-muted-foreground)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" />
</svg>
)}
</div>
<h2 className="mt-4 text-lg font-semibold text-foreground">{title}</h2>
<p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
{action && (
<button onClick={action.onClick}
className="mt-6 min-h-[48px] rounded-full bg-primary px-6 text-sm font-medium text-white transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]">
{action.label}
</button>
)}
</div>
)
}
export type { NyuchiEmptyScreenProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-empty-screenFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-empty-screen