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
Responsive grid system with breakpoints: mobile (0-639), tablet (640-1023), desktop (1024-1439), wide (1440+). Supports column count overrides per breakpoint. Used by all page layouts to arrange sections. The architecture doc specifies this as MukokoGrid.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
/* ═══════════════════════════════════════════════════════════════
NYUCHI GRID — Layer 6 Page Composition
Responsive grid with Mukoko breakpoints.
═══════════════════════════════════════════════════════════════ */
interface NyuchiGridProps extends React.HTMLAttributes<HTMLDivElement> {
/** Columns at each breakpoint. Defaults: mobile=1, tablet=2, desktop=3, wide=4 */
cols?: { mobile?: number; tablet?: number; desktop?: number; wide?: number }
/** Gap between items. Uses spacing tokens. Default: 16px */
gap?: "sm" | "md" | "lg" | "xl"
/** Max content width. Default: none (full width) */
maxWidth?: "sm" | "md" | "lg" | "xl" | "full"
children: React.ReactNode
}
const GAP_MAP = { sm: "gap-2", md: "gap-4", lg: "gap-6", xl: "gap-8" }
const MAX_MAP = { sm: "max-w-screen-sm", md: "max-w-screen-md", lg: "max-w-screen-lg", xl: "max-w-7xl", full: "max-w-full" }
export function NyuchiGrid({
cols = {}, gap = "md", maxWidth = "full", children, className, ...props
}: NyuchiGridProps) {
const { mobile = 1, tablet = 2, desktop = 3, wide = 4 } = cols
return (
<div
data-slot="nyuchi-grid" data-portal="https://design.nyuchi.com/components/nyuchi-grid" role="region"
className={cn(
"grid w-full mx-auto",
`grid-cols-${mobile}`,
`sm:grid-cols-${Math.min(tablet, 2)}`,
`md:grid-cols-${tablet}`,
`lg:grid-cols-${desktop}`,
`xl:grid-cols-${wide}`,
GAP_MAP[gap],
MAX_MAP[maxWidth],
className
)}
{...props}
>
{children}
</div>
)
}
export type { NyuchiGridProps }
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/nyuchi-gridnpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-gridcomponents/ui/nyuchi-grid.tsx