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
Raw empty state primitive with icon, title, description, and call-to-action slots. No brand opinion. Use nyuchi-empty-state (Layer 3) for the branded ecosystem version with mineral accents.
View the full component source code below.
import * as React from "react"
import { Button } from "@/components/ui/button"
import { Inbox } from "@/lib/icons"
interface EmptyStateProps {
icon?: React.ReactNode
title?: string
description?: string
action?: {
label: string
href: string
}
}
function EmptyState({
icon,
title = "Nothing here yet",
description = "Get started by creating your first item.",
action,
}: EmptyStateProps) {
return (
<div data-slot="empty-state" data-portal="https://design.nyuchi.com/components/empty-state" className="flex flex-col items-center justify-center px-4 py-16 text-center">
{/* Icon */}
<div className="mb-4 flex size-16 items-center justify-center rounded-[var(--radius-lg,14px)] bg-muted">
{icon ?? <Inbox className="size-7 text-muted-foreground" />}
</div>
{/* Title */}
<h2 className="font-serif text-lg font-semibold text-foreground">{title}</h2>
{/* Description */}
<p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
{/* Action */}
{action && (
<Button className="mt-6" asChild>
<a href={action.href}>{action.label}</a>
</Button>
)}
</div>
)
}
export { EmptyState }
export type { EmptyStateProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/empty-stateFetch this component's metadata and source code from the registry API.
/api/v1/ui/empty-statecomponents/blocks/empty-state.tsx