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 settings page orchestrator with sidebar navigation on desktop and accordion sections on mobile. Groups settings into titled sections with consistent row patterns (toggle, select, link, destructive). Every app and the global platform settings use this layout.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
/* ═══════════════════════════════════════════════════════════════
NYUCHI SETTINGS PAGE — Layer 6 Page Orchestrator
Standard settings layout. Sidebar nav on desktop, accordion
on mobile. Consistent setting row patterns.
✅ HARNESS ✅ TOKENS ✅ RESPONSIVE ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface SettingSection { id: string; label: string; icon?: React.ReactNode }
interface NyuchiSettingsPageProps {
title?: string
sections: SettingSection[]
activeSection?: string
onSectionChange?: (id: string) => void
children: React.ReactNode
className?: string
}
export function NyuchiSettingsPage({ title = "Settings", sections, activeSection, onSectionChange, children, loading = false, className }: NyuchiSettingsPageProps) {
const { log } = useNyuchiHarness("settings-page")
const [active, setActive] = React.useState(activeSection || sections[0]?.id)
return (
<div data-slot="nyuchi-settings-page" data-portal="https://design.nyuchi.com/components/nyuchi-settings-page" role="main" aria-label="Settings" className={cn("min-h-screen bg-background", className)}>
<div className="mx-auto max-w-4xl px-4 py-6 sm:px-6">
<h1 className="text-xl font-bold text-foreground mb-6">{title}</h1>
<div className="flex flex-col gap-6 md:flex-row">
{/* Sidebar nav (desktop) / horizontal scroll (mobile) */}
<nav className="shrink-0 md:w-48">
<div className="flex gap-1 overflow-x-auto md:flex-col md:overflow-visible scrollbar-none">
{sections.map(s => (
<button key={s.id} onClick={() => { setActive(s.id); onSectionChange?.(s.id) }}
className={cn("flex items-center gap-2 shrink-0 rounded-[var(--radius-md,12px)] px-3 py-2.5 text-sm font-medium transition-colors min-h-[48px]",
active === s.id ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
)}>
{s.icon && <span className="text-base">{s.icon}</span>}
{s.label}
</button>
))}
</div>
</nav>
{/* Content */}
<div className="flex-1 min-w-0">{children}</div>
</div>
</div>
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-settings-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-settings-page