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
Feature flag gate. Instantly show/hide features based on remote config without deployment. Supports kill switch for instant feature disable. Based on Netflix feature flag pattern + OpenFeature standard. Checks local flag cache first (device-first), then remote config.
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 FeatureFlag { key: string; enabled: boolean; source: "local" | "remote" | "default"; variant?: string; rolloutPercent?: number }
interface NyuchiFeatureGateProps {
children: React.ReactNode
flag: FeatureFlag
/** Show nothing when disabled (default: false shows a fallback) */
silent?: boolean
fallback?: React.ReactNode
/** Show "coming soon" instead of hiding */
showComingSoon?: boolean
loading?: boolean
className?: string
}
export function NyuchiFeatureGate({ children, flag, silent = false, fallback, showComingSoon = false, loading = false, className }: NyuchiFeatureGateProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("feature-gate")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
React.useEffect(() => {
if (!flag.enabled) log.info(`feature_disabled: key=${flag.key}, source=${flag.source}`)
}, [flag, log])
if (loading) return <div data-slot="nyuchi-feature-gate" data-portal="https://design.nyuchi.com/components/nyuchi-feature-gate" data-loading role="status" className="h-16 animate-pulse rounded-[var(--radius-lg,14px)] bg-muted" />
if (flag.enabled) return <>{children}</>
if (silent) return null
if (fallback) return <>{fallback}</>
if (!showComingSoon) return null
return (
<div data-slot="nyuchi-feature-gate" role="status" style={animStyle}
className={cn("flex items-center gap-3 rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 opacity-60", className)}>
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[var(--status-info, #3B82F6)]/15">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--status-info, #3B82F6)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground">Coming Soon</p>
<p className="text-xs text-muted-foreground">This feature is being prepared for your region.</p>
</div>
</div>
)
}
export type { FeatureFlag, NyuchiFeatureGateProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/mzizi-feature-gateFetch this component's metadata and source code from the registry API.
/api/v1/ui/mzizi-feature-gate