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.
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"
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>
)
}
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-settings-pagenpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-settings-pagecomponents/ui/nyuchi-settings-page.tsx