nyuchimziziMzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Seven African Minerals palette.
Built by Nyuchi Africav4.1.8
Playground
Doctrine
Releases
Documentation
v4.1.8
nyuchimzizinyuchimziziMzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Seven African Minerals palette.
Interactive playground for the full Mzizi registry. Pick a component to open its live preview, browse its variants, and call the registry API live to fetch its source.
npx shadcn@latest add https://mzizi.dev/api/v1/ui/<component-name>N8 assurance probe that validates WCAG compliance and color-blindness safety across every semantic-color pair. Runs daily via pg_cron, detects regressions, and files a Fundi issue for each. Uses Machado/Oliveira/Fernandes (2009) linear-RGB simulation matrices for protanopia, deuteranopia, tritanopia, and achromatopsia. Includes an audit_exempt flag so decorative borders covered by WCAG 1.4.11 non-text-contrast exemption are correctly skipped.
A vertically stacked set of interactive headings that reveal content.
Admin/back-office page. Tabbed admin interface with sidebar navigation, content area, and action bar. For Mukoko Console admin, B2B partner dashboards, org management.
AI safety utilities: input validation, prompt injection detection, and rate limiting.
Displays a callout for important information.
A modal dialog that interrupts the user with important content and expects a response.
Analytics dashboard page. KPI cards, time-series charts, data tables, date range picker, export controls. Used by Mukoko Console, Nyuchi Web Services, and B2B partners. Open data compatible — sections can be made public. Competitors: Grafana, Google Analytics, Metabase.
API explorer/playground page. Endpoint browser, request builder, response viewer, auth token input. For Nyuchi Web Services API docs. Competitors: Swagger UI, Postman, Stripe API Reference.
Ecosystem app selector popover with grid of Nyuchi app icons.
Article/news reading page. Hero image, headline, author, read time, content body, source badge, related articles. Competitors: Medium, BBC, Al Jazeera.
Displays content within a desired ratio.
An image element with a fallback for representing the user.
Displays a badge or a component that looks like a badge.
Billing & subscription management page. Current plan, usage meters, invoices, payment methods, upgrade CTA. Used by Nyuchi Web Services, B2B partners, and Mukoko premium subscribers.
Booking/reservation page. Service/ride selection, date/time picker, provider selection, confirmation. Used by transport, health, events.
Displays the path to the current resource using a hierarchy of links.
Displays a button or a component that looks like a button.
A date field component that allows users to enter and edit dates.
Displays a card with header, content, and footer.
A carousel with motion and swipe built using Embla.
Beautiful charts built using Recharts. Copy and paste into your apps.
Area chart — axes variant.
Area chart — default variant.
Area chart — gradient variant.
Area chart — icons variant.
Area chart — interactive variant.
Area chart — legend variant.
Area chart — linear variant.
Area chart — stacked variant.
Area chart — stacked expand variant.
Area chart — step variant.
Bar chart — active variant.
Bar chart — default variant.
Bar chart — horizontal variant.
Bar chart — interactive variant.
Bar chart — label variant.
Bar chart — label custom variant.
Bar chart — mixed variant.
Bar chart — multiple variant.
Bar chart — negative variant.
Bar chart — stacked variant.
Line chart — default variant.
Line chart — dots variant.
Line chart — dots colors variant.
Line chart — dots custom variant.
Line chart — interactive variant.
Line chart — label variant.
Line chart — label custom variant.
Line chart — linear variant.
Line chart — multiple variant.
Line chart — step variant.
Pie chart — donut variant.
Pie chart — donut active variant.
Pie chart — donut text variant.
Pie chart — interactive variant.
Pie chart — label variant.
Pie chart — label custom variant.
Pie chart — label list variant.
Pie chart — legend variant.
Pie chart — separator none variant.
Pie chart — simple variant.
Pie chart — stacked variant.
Radar chart — default variant.
Radar chart — dots variant.
Radar chart — grid circle variant.
Radar chart — grid circle fill variant.
Radar chart — grid circle no lines variant.
Radar chart — grid custom variant.
Radar chart — grid fill variant.
Radar chart — grid none variant.
Radar chart — icons variant.
Radar chart — label custom variant.
Radar chart — legend variant.
Radar chart — lines only variant.
Radar chart — multiple variant.
Radar chart — radius variant.
Radial chart — grid variant.
Radial chart — label variant.
Radial chart — shape variant.
Radial chart — simple variant.
Radial chart — stacked variant.
Radial chart — text variant.
Tooltip chart — advanced variant.
Tooltip chart — default variant.
Tooltip chart — formatter variant.
Tooltip chart — icons variant.
Tooltip chart — indicator line variant.
Tooltip chart — indicator none variant.
Tooltip chart — label custom variant.
Tooltip chart — label formatter variant.
Tooltip chart — label none variant.
Chat/messaging page composition. Conversation list or active chat with message input, media attachments, read receipts. Competitors: WhatsApp, Telegram, WeChat.
A control that allows the user to toggle between checked and not checked.
Checkout/order page. Cart summary, shipping, payment method selection, order confirmation. Multi-step with progress indicator.
An interactive component which expands and collapses a panel.
Fast, composable, unstyled command menu for React.
Nyuchi Console main dashboard. Project overview, resource usage, API traffic, deploy status, quick actions. The control center for Nyuchi Web Services. Competitors: Vercel Dashboard, AWS Console, Cloudflare Dashboard.
Displays a menu to the user triggered by a right click.
Governance proposal card with title, description, proposer, voting progress bar (for/against/abstain), deadline countdown, quorum status, and vote action. Maps to ubuntu.dao_proposals table. Used in the governance section of the Mukoko Foundation interface.
Full dashboard layout with stats, chart section, and activity feed.
Data explorer page for open data. Table browser, SQL/filter builder, column selection, pagination, CSV/JSON export. Used by Nyuchi Open Data platform and B2B partners. Competitors: Metabase, data.gov, Socrata.
A window overlaid on the primary window, rendering content underneath inert.
A drawer component for React built on top of Vaul.
Displays a menu to the user triggered by a button.
A React error boundary component that catches render errors and displays a fallback.
Standard error page for 404, 500, and 503 states with mineral accent.
Building forms with React Hook Form and Zod.
Health dashboard page. Vitals overview, activity rings, medication reminders, upcoming appointments, health score. Competitors: Apple Health, MyFitnessPal, Babylon.
For sighted users to preview content available behind a link.
Individual user profile page. Avatar, bio, verification tier, trust score, activity stats, content tabs (posts, media, listings, reviews). Competitors: LinkedIn, Instagram, WeChat.
Infrastructure monitoring page. Service health grid, deployment history, resource utilization gauges, incident timeline. For Nyuchi Web Services ops. Competitors: Datadog, New Relic.
Displays a form input field.
Accessible one-time password component with copy paste functionality.
Job board/listings page. Search, filters (location, type, salary, industry), list of job cards. Competitors: LinkedIn, Indeed, Glassdoor.
Renders an accessible label associated with controls.
Learning/education page. Course content, lesson progress, quiz area, notes. Competitors: Duolingo, Coursera, Khan Academy.
Centered card login with email/password and mineral accent stripe.
Split layout login with brand image left, form right.
Social login buttons (Google, GitHub) plus email/password form.
OTP/magic link style login with code input.
Two-column login with brand showcase and mineral colors.
Logs viewer page. Real-time log stream, severity filters, search, time range, structured log expansion. For Nyuchi Web Services debugging and compliance audit trails.
Map/navigation page. Full-screen map with search, pin details, route overlay, bottom sheet for location info. Competitors: Google Maps, Uber, Bolt.
Marketplace/storefront browsing page. Search, category filters, grid/list toggle, product cards. Competitors: Jumia, Amazon, Alibaba, Facebook Marketplace.
Full-screen media player page. Video/audio player with controls, comments, related content. Competitors: YouTube, TikTok, Netflix, Spotify.
A visually persistent menu common in desktop applications.
Runtime accessibility compliance checker. Scans rendered DOM for WCAG violations: missing ARIA labels, insufficient contrast, missing alt text, broken focus order, touch target sizes. Can run on-demand or continuously in development. Competitors: Lighthouse, axe-core.
Adaptive Bitrate Content — adjusts content quality based on network conditions. Serves lower-resolution images, compressed text, and deferred media on slow connections. Based on TikTok ABR streaming but applied to all content types, not just video. Critical for Africa where 2G/3G is common.
SLO/SLA tracking and threshold-based alerting with escalation. Defines budgets (error budget, latency budget), monitors them, and fires alerts when thresholds are breached. Supports severity escalation: warn → page → incident. Competitors: PagerDuty, Grafana Alerting.
API endpoint health checker. Pings all design portal API endpoints (from component_backlinks) and reports status codes, latency, and error rates. Feeds into nyuchi-platform-health. Uses the backlinks system built in v4.8.0.
Blockchain network verification gate. Checks which chain the user is connected to before rendering chain-dependent features. Supports Nyuchi Network (Cosmos SDK), Polygon, and Ethereum. Shows branded switch-network CTA with chain logos.
Blockchain RPC failure handler. Handles chain disconnections, RPC timeouts, reorganizations, and wallet disconnections without crashing the UI. Auto-retries with exponential backoff. Shows branded chain status with recovery actions.
Reactive chaos diagnostics — N8 Assurance (Z-axis/depth). Runs through the entire 3D architecture, able to inject failures at any component on any horizontal layer, through any vertical spine. Two modes: (1) Injection — random error/latency at configurable probability per layer intersection. (2) Reactive — when a real error is caught anywhere in the 3D space, probe adjacent systems for blast radius. The depth dimension that proves X and Y axes work.
Conformity monkey — verifies deployed components match the design registry. Scans the DOM for data-slot/data-portal attributes and cross-references with the component database. Flags: unregistered components, outdated versions, missing backlinks, components using deprecated patterns. Inspired by Netflix Conformity Monkey.
Content access gate with age verification, location restrictions, and content sensitivity filters. Renders children when all checks pass. Shows a branded explanation with the specific restriction reason when blocked. Supports multiple gate types that can be composed.
Post-quantum cryptography fallback handler. When PQC verification fails (library not loaded, algorithm not supported on device), falls back to classical verification with a "reduced security" visual indicator. Based on the QuantZen overlay pattern — adds quantum-safe layer without breaking existing UX.
Quantum-safe cryptographic verification gate. Validates signature strength — in quantum-ready mode requires PQC dual-signature (CRYSTALS-Dilithium + classical ECDSA). Degrades gracefully showing "reduced security" indicator when only classical signatures are available. Based on the QuantZen dual-signature pattern.
Configurable degradation fallback chain: personalized → cached → trending → default → static. Each level renders when the previous fails. Based on Netflix graceful degradation — the "bookmark service" pattern applied across all mini-apps.
Decentralized Identifier (DID) credential gate. Verifies W3C Verifiable Credentials from the Nyuchi Honeycomb pod. Works offline by checking the local credential store first, then validates against the server when connectivity returns. Shows "locally verified" vs "server confirmed" status.
Brand error and resilience states for the Nyuchi ecosystem. Exports ErrorCard (inline error within feeds), NotFound (brand 404 page), OfflineBanner (local-first connection status indicator), SectionFallback (section-level error with retry). NOTE: PermissionGate is also currently exported here but architecturally belongs at Layer 4 (Safety & Trust) and should be extracted into a separate component in a future refactor. Each state uses mineral accents, brand typography, and matches the Nyuchi identity system.
Structured error collection, deduplication, and blast radius analysis. Catches errors from L5 error boundaries, enriches them with component backlinks (data-portal), calculates which mini-apps and layers are affected. Competitors: Sentry, Datadog Error Tracking.
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.
Data sovereignty and jurisdiction gate. Ensures content and features comply with the user's local data protection laws (GDPR, POPIA, Zimbabwe DPRA). Blocks region-restricted content with branded explanation and jurisdiction info.
Incident lifecycle management: detect → triage → mitigate → resolve → postmortem. Tracks incidents with severity, affected components (via backlinks), timeline of actions, and generates postmortem templates. Competitors: PagerDuty, incident.io.
Prioritized load shedding. Under pressure, critical requests (auth, payment) survive while non-critical (analytics, recommendations, media enrichment) are shed first. Shows degraded mode indicator. Based on Netflix prioritized load shedding.
Content moderation status gate. Blocks rendering until content passes the Shamwari AI safety pipeline. Shows branded "under review" state with estimated wait time. Supports on-device moderation check (CoreML/NNAPI) before cloud verification. Based on TikTok two-stage AI moderation.
Offline feature availability gate. Determines if a feature works offline, with cached data, or requires a connection. Shows branded "available offline" or "requires connection" state. Critical for local-first architecture — treats connectivity as a gradient, not a binary. Based on WhatsApp offline queuing but for all feature types.
Web Vitals and performance monitoring. Tracks LCP, FID, CLS, INP, TTFB per page and per component (using data-portal backlinks). Reports to analytics. Competitors: Lighthouse, Web Vitals library, Vercel Analytics.
Verification tier gate. Checks the user's verification tier against the required tier before rendering children. Shows a branded mineral-colored upgrade CTA if insufficient. Maps to system.verification_tier (5 tiers: unverified, community, OTP, government, licensed). Renders children when check passes, branded explanation when it doesn't.
Transparent platform health dashboard — N8 Assurance (Z-axis/depth). Observes the full 3D architecture: every horizontal layer (L2-L7), every vertical spine (L1 tokens, L4 safety, L5 resilience), and reports which intersections are operational, degraded, or in outage. The depth view into the system.
Pre-loads the next screen critical data and components while user is on current screen. TikTok seamless swipe pattern for all navigation. Respects Save-Data header and low battery.
Client-side rate limiting gate. Shows "too many attempts" with cooldown timer BEFORE requests leave the device. Prevents unnecessary server load and gives immediate feedback. Based on WeChat gateway rate limiting pattern.
Real User Monitoring. Collects page load timing, interaction delays, network quality, and navigation patterns from actual users. Aggregates by mini-app, page, device, and connection type. Privacy-respecting — no PII, only performance metrics. Competitors: Datadog RUM, Vercel Analytics.
The workhorse section wrapper for every page. Combines error boundary, loading skeleton, health reporting, and optional lazy mounting into a single component. Every section of every page is wrapped in NyuchiSection. If one section fails, the rest keep working. Reports health status (healthy/degraded/error/loading) to the global health monitor. The architecture doc says: "Every section of every page is wrapped in resilience."
DEPRECATED — Loading states are built into each component from Layer 2 up via the loading prop. Every component renders its own shaped skeleton matching its exact proportions. This top-down skeleton set is a legacy pattern. Use <NyuchiListingCard loading /> instead of <ListingSkeleton />. Will be removed in the next major version.
CouchDB sync state indicator. Shows sync progress, conflict count, and resolution status. The bridge between local-first data and cloud truth. Displays: synced, syncing (with progress), conflicts pending, sync error, and offline-queued states.
Synthetic user journey probes that run on schedule. Defines step-by-step user flows (login → navigate → action → verify) and executes them against live or staging environments. Reports pass/fail with latency per step. Competitors: Datadog Synthetic Monitoring, Checkly.
Trust score threshold gate. Blocks features that require a minimum trust score. Shows the user's current score, the required threshold, and actionable steps to improve. Maps to the Ubuntu Layer trust model: Status × Verification Tier → Trust Score. Used for: posting requires > 0.1, selling requires > 0.3, moderating requires > 0.5.
Web3 wallet connection gate. Verifies wallet is connected and optionally checks token balance (MIT soulbound, MXT transferable, NST storage, NHC utility). Shows branded connect CTA with mineral-colored wallet icon when not connected. Supports Cosmos SDK (Nyuchi Network), Polygon, and Ethereum wallets.
A collection of links for navigating websites.
NFT display card showing media (image/video), title, collection, owner, and marketplace actions. Used for Nhimbe ERC-1155 tickets, Novels chapter NFTs, Ubuntu badge NFTs, and creator content NFTs. Maps to wallet.nft_holdings.
Universal branded bottom action sheet for contextual actions on any content across the ecosystem. Share, save, report, copy link, block, follow — the standard set of actions available on listings, posts, profiles, and messages. Renders as a bottom sheet on mobile with mineral accent on destructive/primary actions. Composes sheet and share-dialog primitives.
Universal branded alert banner with mineral-coded severity levels. Used across all ecosystem apps for weather alerts, system notifications, security warnings, trust advisories, and any time-sensitive information. Severity maps to minerals: watch=cobalt, moderate=terracotta, severe=gold. Renders as a prominent banner with dismiss, detail action, and safety instructions.
Branded job application status timeline showing application stages (applied, reviewed, interview, offer, rejected) with timestamps and employer feedback. Gold mineral accent. Used in Jobs dashboard.
News article card extending nyuchi-listing-card with factcheck badge, source attribution, journalist byline, and read time. Maps to news.news_article (67 columns) and news.feed_source. Used in Mukoko News feeds, Pulse aggregation, and content discovery.
Default auth screen layout that services all login, signup, and onboarding flows. Provides the branded container: centered card with mineral gradient background, Mukoko logo, language selector, and legal links. Individual auth flows (login-01..05, signup-01..05) render inside this layout as children.
Ubuntu achievement badge showcase. Displays earned badges in a grid or inline strip with mineral-colored badge icons, earned dates, and rarity indicators. Maps to ubuntu.badges and ubuntu.user_badges tables. Used on profile pages, leaderboards, and achievement notifications.
Token balance display card for the Mukoko wallet. Shows primary balance with MIT currency, secondary fiat conversion, and quick action buttons (Send, Receive, Swap). Maps to wallet.balance table. Used at the top of wallet views and in mini wallet widgets.
Mobile-only bottom navigation bar for Nyuchi ecosystem apps. Supports a center FAB (floating action button) — a raised button in the app mineral accent colour with a glow shadow. The center FAB is the primary creation entry point, making the "create" action instantly recognizable across all apps.
Brand calendar component wrapping react-day-picker with Mukoko event dot indicators, mineral-colored day highlights, and integrated agenda view for the selected day. Used by nhimbe (events), planner, and any Mukoko app that shows date-anchored content. The event dots are the key differentiator — small mineral-colored circles beneath dates that have associated content.
Global command palette (Cmd+K / Ctrl+K). Search across mini-apps, navigate to pages, run actions. Competitors: Vercel, Linear, Raycast. Overlay with fuzzy search, recent items, and categorized results.
Branded saved commute card showing a recurring route with estimated time, mode, and next departure. Gold mineral accent. Used in Transport home screen for quick access to daily commutes and in Planner as part of the daily schedule view. Renders inside NyuchiListView feeds.
Network connectivity status bar. Shows connection state: online, syncing, cached, offline. Auto-hides when online. Uses L1 connection tokens and L5 offline-banner pattern. Placed at top of app by root layout.
Universal freeform content creation component — the branded way to compose posts, updates, stories, and messages across the ecosystem. Combines text input, media attachment, mention tagging, and mineral-accented submit button. Used in Circles (posts), Pulse (updates), Campfire (messages), Novels (chapter drafts), and anywhere users create unstructured content. Distinct from nyuchi-create-listing which handles structured form-based creation.
Chat conversation list row for Campfire messaging. Shows avatar, conversation name, last message preview, timestamp, unread count badge, and online status dot. Maps to campfire.conversation and campfire.participant tables. Used in the main chat list view.
Cover image header with overlapping avatar or logo. Used by individual and org profile pages. Branded with mineral accents and verification badge slot. Extracted from individual-profile-page and org-profile-page.
Universal create/edit form layout for all Mukoko content types — events, products, news, bush trade listings, directories. Provides the standardized brand creation flow: cover theme picker, grouped form sections in cards, toggle/dropdown rows, description editor, and sticky publish CTA. Every "Create" or "Edit" screen across the super app uses this composition.
Standard creation flow page orchestrator. Header with cancel/title/submit, stepped or single-form layout, cover theme picker slot, section cards, and sticky submit CTA. Every creation screen uses this: create event, create listing, create post, write chapter, post video caption. The developer provides form sections as children and handles submission.
Professional credential display card showing qualification name, issuing body, status (active/expired/revoked/suspended/pending), expiry date, and verification tier. Maps to identity.credential (35 columns) and system.regulatory_body. Used on profile pages, professional directory, and credential verification screens.
Full app shell composing NyuchiHeader, NyuchiSidebar, and NyuchiBottomNav into a responsive dashboard layout.
Universal link and deep link routing handler. Maps external URLs, push notification taps, and share links to in-app routes. Handles: mukoko.com/{path}, mini-app deep links, push notification payloads, NFC/QR scan results.
Shared detail page layout for all content types across the Nyuchi ecosystem — events, articles, products, bush trade listings, places. Supports a hero gradient variant with floating back/like/share action buttons, mineral-colored category badges, and verified badge display for the host/author. The detail-layout is the brand-standard way to present any single piece of content at full depth.
Standard detail page orchestrator. Hero section with cover image, back/share/like actions, content body, related items section, and sticky bottom CTA. Every content detail screen uses this: event detail, article detail, product detail, place detail, job detail, profile detail, novel detail. The developer provides the hero content, body sections, and action handlers.
Default empty state screen for pages with no content yet. Used across mini-apps when a feed, list, or section has zero items. Branded illustration placeholder, message, and optional CTA.
Universal branded empty state with dynamic mineral accent, contextual illustration placeholder, title, description, and optional action CTA. Every screen across the ecosystem uses this when there is no content to display — "No events yet", "Your wallet is empty", "No messages", "Start your first lesson". The empty state guides users toward the creation action for that domain.
Default full-page error screen for 404, 500, 503, and custom errors. Used by the App Router error.tsx and not-found.tsx pages. Branded with mineral gradient, retry action, and navigation back to safety.
DEPRECATED: Use nyuchi-ticket-card instead. This was an early pre-brand event card without harness, motion, or ARIA integration.
DEPRECATED: Use nyuchi-listing-card instead. This was an early pre-brand featured listing without harness, motion, or ARIA integration.
Standard feed page orchestrator composing header, search/filter bar, NyuchiListView infinite scroll feed, pull-to-refresh, empty state, and FAB create button into a complete screen. Every feed screen across every mini-app uses this layout — Pulse home, News feed, Circles timeline, BushTrade listings, Jobs board, Nhimbe events, Places directory. The developer provides the data source, card renderer, and filter configuration. The orchestrator handles layout, loading, errors, and responsive behaviour.
Standardized footer for all Nyuchi ecosystem apps with mineral color dots.
Branded weather forecast display with cobalt mineral accent. Shows current conditions, temperature, humidity, 5-day outlook, and farming/agriculture advisory for African rural contexts. Mineral-coded severity levels for weather alerts. Used in Weather home and as an embedded widget in Nhimbe event pages and BushTrade logistics.
Fundi — the self-healing intelligence engine. Swahili for fixer/mechanic/technician. N9 acts on what N8 observes. Built in Rust, deployed as a Cloudflare Worker (workers-rs crate, compiled to WebAssembly). NOT a Cloudflare Worker (Rust/WASM) — Fundi is independent of the database vendor. Reads fundi_issues and observability_events from Supabase via REST API. Classifies failure patterns, deduplicates against open GitHub issues, creates structured remediation tickets. Triggered by Cloudflare Cron Triggers and Cloudflare Queues.
Fundi learning system. Tracks healing outcomes to improve future decisions. When an issue is resolved, records what failed, what Fundi suggested, what actually worked, and whether the same pattern recurs. Runs as part of the Fundi Cloudflare Worker — same Rust binary, different handler. Writes learned patterns to fundi_issues via Supabase REST API. Improves classification accuracy over time.
Bridge from N8 Assurance to N9 Fundi. When N8 components detect failures, the reporter pushes a structured signal to the Cloudflare Queue that triggers Fundi. Signal payload: component name, ecosystem node, error type, severity, diagnostic data. The Queue decouples N8 (detection) from N9 (healing) — N8 never waits for Fundi to respond. Also creates a fundi_issues row in Supabase as the append-only audit trail.
Branded metric card with radial arc gauge, value display, label, and contextual description. The universal pattern extracted from mukoko-weather MetricCard. Used for UV index, trust scores, completion percentages, health vitals, battery levels, signal strength — any bounded numeric value displayed as a gauge. Composes the arc-gauge primitive with brand styling.
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.
Universal branded group/community card with dynamic mineral accent based on the parent app. Shows group name, member count, avatar strip, activity indicator, privacy level, topic tags, and join CTA. Used across Circles (communities), Campfire (group chats), BushTrade (seller groups), Nhimbe (event communities), and any app with group-based features.
Standardized sticky header for all Nyuchi ecosystem apps. Supports desktop nav links and mobile pill action group — a capsule-shaped container with 2–3 icon buttons in the brand accent color (dynamic per mini-app). The pill group is the primary brand identity marker in the header.
Branded health overview card composing vitals-display, medication-reminder, and appointment-card primitives with malachite mineral accent. Shows key health metrics, upcoming appointments, and medication schedule at a glance. Sovereign data — all health data stays in the user pod.
Branded large primary value display with condition label, secondary stats, icon, and share button. The universal pattern extracted from mukoko-weather CurrentConditions. Used for: temperature (Weather), portfolio value (Wallet), trust score (ID), daily steps (Health), total revenue (BushTrade). Any screen that needs a single large number as its hero.
Branded job listing card with employer verification badge, salary range, location, skill tags, and apply CTA. Gold mineral accent. Renders inside NyuchiListView feeds. Appears in Jobs feed, Pulse aggregation, search results, and recommended listings. The job-specific data shape (salary, skills, match score, remote flag) makes this a distinct card type rather than a nyuchi-listing-card variant.
Ranked leaderboard row with position indicator, avatar, name, score, and trend. Maps to ubuntu.leaderboards table. Used in community rankings, Ubuntu point leaderboards, and competitive features. Top 3 positions get mineral-colored rank badges (Gold, Tanzanite, Cobalt).
Branded language lesson card for Mukoko Lingo with cobalt mineral accent. Shows lesson title, language pair, progress percentage, streak indicator, difficulty level, and estimated time. Used in Lingo course listings and learning path displays.
Universal content card for all Mukoko listing types — events, products, news, bush trade, directories. Supports row, compact, and hero variants with mineral-colored category accents. The foundational brand component: every listing across the super app uses this pattern.
Brand media components for the Nyuchi ecosystem. Exports MukokoMediaViewer (full-screen image/video viewer with swipe navigation, pinch-to-zoom, share), MukokoImageGallery (multi-image grid with lightbox expansion and count badge), MukokoReaderMode (long-form content reader with adjustable font size, line height, theme, and estimated reading time for articles and novel chapters), MukokoMediaMessage (standardized format for image/video/audio/document/location messages in Campfire chat), and MukokoStoryRing (ephemeral content avatar ring with gradient border and unseen indicator). Maps to bytes.video_object, novels.chapter, news.news_article, campfire.message, and content.creative_work.
Brand-styled chat message bubble for Campfire messaging. Supports sent/received variants, delivery status indicators (sent/delivered/read), emoji reactions, reply threading, and verified sender badge. Maps to campfire.message and campfire.reaction tables. The Mukoko chat identity: pill-shaped bubbles with malachite accent on sent messages.
Mini-app container for Mukoko super-app architecture. Manages mini-app lifecycle: load, mount, suspend, destroy. Provides isolated context per mini-app with shared token system. Architecture doc: "13 Tier 2 web mini-apps" + "4 Tier 1 native mini-apps".
Ubuntu mission/quest card with progress bar, reward badge preview, difficulty indicator, and completion state. Maps to ubuntu.missions and ubuntu.mission_progress tables. Used in the Ubuntu gamification system to drive community contribution through structured challenges.
App-wide notification drawer/panel. Displays notifications grouped by type (social, fintech, system, alerts), with read/unread state, actions, and swipe-to-dismiss. Competitors: Instagram, Slack, WeChat.
Brand notification item for the Mukoko notification center. Displays a notification with action type icon, actor avatar, message, timestamp, and read/unread state. Mineral-colored icon backgrounds map to notification categories. Used across all Mukoko apps via the shared system.notifications schema.
Commerce offer/product card for Bush Trade with price display, original/discount pricing, availability, seller verification badge, and inquiry CTA. Maps to commerce.offer and commerce.product tables. Used in Bush Trade marketplace, commerce listings, and deal displays.
Universal branded onboarding step card used across all ecosystem app first-use experiences. Shows an illustration area, title, description, progress dots, and next/skip actions. Dynamic mineral accent. The individual step within any onboarding flow — composable with swiper or stepper primitives for multi-step sequences.
Canonical page wrapper with SEO metadata, Open Graph, Schema.org structured data, and canonical layouts (feed, detail, settings, dashboard, auth). Architecture doc: MukokoPage. Every screen in the app is wrapped in NyuchiPage which handles head metadata, breadcrumbs, and the page-level section arrangement.
Universal branded payment summary and confirmation card. Shows what is being purchased, price breakdown, payment method, and confirm CTA. Used across all domains with financial transactions: BushTrade (product purchase), Nhimbe (ticket purchase), Transport (ride booking), Wallet (token transfer), Health (consultation fee), Novels (chapter unlock). Supports multi-currency (ZWL, USD, ZAR, KES) and MIT token payments.
Media player that persists across navigation. Mini-player bar at bottom when navigating away from media. Supports video, audio, and live streams. Competitors: YouTube mini-player, Spotify persistent bar, Netflix PiP.
Branded word/phrase learning card for Mukoko Lingo with cobalt mineral accent. Shows phrase in source and target languages, pronunciation guide, usage example, and practice/audio controls. Part of the commitment to treating African languages as first-class citizens.
Place/location card extending nyuchi-listing-card with map pin, verification badge, distance, rating, and opening hours. Maps to places.places (104 columns). Used in Mukoko Places, Shamwari location suggestions, hospitality listings, and any app that displays a physical location.
DEPRECATED: Use nyuchi-offer-card instead. This was an early pre-brand product card without harness, motion, or ARIA integration.
Standardized profile display block used across all Mukoko apps. Centers the avatar with verification badge, name with inline verified check, platform status indicator, trust score meter, and stat counters. The three trust indicators (verified badge, status pill, trust score) are always visible on the profile header — not just badges elsewhere in the app, but the full expanded view here.
Full-width profile banner with avatar, name, bio, stats, and actions.
Standard profile page with cover image, avatar, stats, tabs, and action buttons.
Standard profile page orchestrator with cover image, avatar, name/verification display, stat counters, tab navigation, and content area. Every user, business, organisation, and group profile uses this layout across the ecosystem. The developer provides the tab content as children.
Standard settings page with sidebar navigation and content sections.
Timeline-style programme/schedule item for event agendas. Shows time slot, title, speaker/host, and mineral-colored timeline dot. Maps to events.programme_item table. Used on event detail pages for agenda/programme display.
Branded service provider card showing a professional or business with verification badge, specialty, availability, rating, and booking CTA. Dynamic mineral accent. Used across Health (doctors), Places (businesses), BushTrade (sellers), and any domain where verified service providers need display. Renders inside NyuchiListView feeds.
Universal branded review card with trust-verified reviewer badge, star rating, review text, and helpful vote. Used across all domains where user reviews exist: Places (business reviews), BushTrade (seller reviews), Novels (book reviews), Health (provider reviews), Nhimbe (event reviews). The reviewer verification tier is always visible — Ubuntu principle: trust is earned and displayed.
Next.js App Router root layout. Composes all providers: ThemeProvider, SidebarProvider, Harness, LiveRegion portal, and font loading. The outermost wrapper of the entire application. Architecture doc: "Root layout with MukokoThemeProvider".
Route-level protection gate. Checks auth state, role, subscription tier, and verification level before rendering a route. Redirects to appropriate screen (login, upgrade, verification) if requirements not met. Composes L4 safety gates at the route level.
Branded route planning display composing route-card, stop-card, and itinerary-timeline primitives with gold mineral accent. Shows origin, destination, transit mode, duration, fare estimate, and step-by-step route. Integrates with Harare Metro data backbone and Nyuchi Logistics fleet.
Stateful RSVP button with confirmation status variants: pending, confirmed, waitlisted, declined. Pill-shaped with mineral accent, loading state, and capacity indicator. Maps to events.rsvp_action table. The standardized way to handle event registration across nhimbe.
Universal branded search results view composing search-bar, filter-bar, and search-results primitives with mineral-accented category filters. Shows unified cross-app results: people, places, events, products, articles, groups. Each result type renders using its corresponding brand card (nyuchi-listing-card, nyuchi-place-card, user-card, nyuchi-group-card). The standard search experience across the entire ecosystem.
SEO metadata component for Next.js App Router. Generates head metadata, Open Graph tags, Twitter Cards, Schema.org JSON-LD structured data, and canonical URLs. Server component — runs at build/request time. Supports all Schema.org types used by the platform: JobPosting, VideoObject, MedicalWebPage, RentalCarReservation, Product, Event, Article, Recipe, etc.
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.
Universal branded share composition wrapping the share-dialog primitive. Shows a preview card of the shared content (title, image, source app), sharing options (copy link, share to Campfire, native share, social platforms), and a branded deep link. Every shareable piece of content across the ecosystem uses this pattern — listings, articles, profiles, places, events, videos, groups.
Standardized sidebar for all Nyuchi ecosystem apps with mineral accent strip and section-based navigation.
Branded sidebar navigation with nav items, badges, and section headers. Extracted from admin-page, api-explorer-page, and logs-page. Uses mineral accents for active state.
News source credibility indicator badge tied to verification tier. Shows the source name with a mineral-colored trust indicator. Maps to news.feed_source and news.news_media_organization verification status. Used inline on article cards and in source attribution lines.
Default splash/loading screen shown on app launch or during major transitions. Branded with mukoko wordmark and mineral accent. Supports progress indication for initial data hydration.
Horizontal compact stats bar for dashboards, home screens, and admin views. Displays 2–4 metric blocks inline with icon, label, value, and optional trend indicator. Uses mineral-colored icon backgrounds. The brand-standard way to show key metrics at a glance across all Mukoko apps.
Branded success/confirmation screen with mineral-colored checkmark, title, message, and optional actions. Extracted from payment-page, checkout-page, and booking-page where the same checkmark + title pattern was repeated. Uses Five African Minerals for the success indicator.
Branded suitability/recommendation card with score, icon, title, description, and mineral-colored score indicator. Universal pattern from mukoko-weather ActivityInsights. Used for: "Good for farming" (Weather), "Good for families" (Places), "Good for outdoor exercise" (Health), "Safe to travel" (Transport), "Good match for you" (Jobs). Any scored recommendation.
Theme provider component that wraps the application and distributes design tokens via CSS custom properties and React context. Supports light/dark/high-contrast themes, per-brand accent overrides, system preference detection (prefers-color-scheme, prefers-contrast), and runtime theme switching. Every Nyuchi app wraps its root in this provider.
Event ticket display card with QR code area, ticket tier, status indicator (valid/used/cancelled/transferred), and event details. Maps to events.ticket and events.ticket_tier tables. Used in My Events, check-in flows, and digital wallet views.
App-level toast/notification stack. Manages positioning, stacking, auto-dismiss, and swipe-to-dismiss for transient notifications. Wraps the L2 toast primitive with app-level behavior.
Transaction history row for the Mukoko wallet. Displays transaction type (send/receive/purchase/reward), amount with MIT currency formatting, counterparty, status, and timestamp. Maps to wallet.transaction table. Used in wallet history, payment confirmations, and financial reporting.
Full trust score visualization showing the three-signal breakdown: Verification Tier (are you real?), Platform Status (are you active?), and Ubuntu Contribution (are you helpful?). Displays the composite score as a meter bar with individual signal breakdowns. Used on profile detail pages, admin views, and trust audit screens. This is the expanded view of trust — the verified badge is the compact view.
App update / new version available prompt. Shows when a new version is detected via service worker. Dismissible with optional force-update for critical patches.
Compact user profile card with avatar, name, role, and actions.
A user profile dropdown menu with avatar, name, email, navigation links, and sign-out action.
Verification badge tied to the three-axis Mukoko trust model: Status (platform lifecycle) × Verification Tier (identity ladder) → Trust Score. Renders the appropriate mineral-colored badge for each tier — Terracotta (Community 0.10), Cobalt (OTP 0.20), Gold (Government 0.30), Tanzanite (Licensed 0.50). Suspended/ancestral accounts show a dimmed or memorial variant. Used inline next to names, on profile headers, listing cards, and anywhere trust needs to be communicated.
Connection status indicator for the local-first architecture. Distinguishes between "offline" (no connection), "showing cached data" (offline but data available), and "syncing" (reconnecting). Persists at the top of the viewport. Dismissible but reappears on state change. Uses CouchDB sync status when available.
Multi-step onboarding flow with progress indicator, profile setup, and interest selection.
Step-by-step spotlight overlay guiding users through UI features.
Organization/business profile page. Logo, description, verification status, team members, location, hours, products/services tabs. For businesses, NGOs, government entities on the platform.
Pagination with page navigation, previous and next links.
Payment page composition. Amount input, recipient selection, payment method, confirmation. Supports fiat (EcoCash, bank), crypto (MXT, NHC), and cross-border via Nhimbe. Competitors: M-Pesa, Revolut.
Displays rich content in a portal, triggered by a button.
Displays an indicator showing the completion progress of a task.
A set of checkable buttons where only one can be checked at a time.
Report/document page. Structured report with title, date, sections, charts, tables, and print/export actions. For generated analytics reports, compliance docs, audit trails.
Accessible resizable panel groups and layouts with keyboard support.
N8 assurance probe that validates RTL (right-to-left) layout correctness across deployed components. Checks: logical properties (start/end vs left/right), bidi text rendering, icon mirroring rules, text alignment consistency. Audit flagged as missing accessibility infrastructure. ALPHA — awaiting edge function implementation.
Augments native scroll functionality for custom, cross-browser styling.
Section-level error boundary for the 5-layer architecture with retry, named sections, and observability logging.
Displays a list of options for the user to pick from, triggered by a button.
Visually or semantically separates content.
Extends the Dialog component to display content that complements the main content of the screen.
A composable, themeable and customizable sidebar component.
Basic sidebar with icon and text navigation items.
Collapsible sidebar with grouped sections.
Sidebar with search bar at top.
Sidebar with user profile section.
Sidebar with nested sub-navigation.
Icon-only collapsed sidebar.
Sidebar with badge notification counts.
Sidebar with header and footer sections.
Sidebar with grouped navigation categories.
Floating sidebar detached from edge.
Sidebar with accordion sections.
Sidebar with breadcrumb trail.
Sidebar with quick actions panel.
Sidebar with theme toggle.
Sidebar with workspace switcher.
Full-featured sidebar combining all patterns.
Basic signup with name, email, and password fields.
Multi-step signup wizard with progress indicator.
Split signup with features showcase panel.
Invite-only signup with invite code input.
Social and email signup with terms checkbox.
Used to show a placeholder while content is loading.
An input where the user selects a value from within a given range.
Social feed page. Infinite scroll content feed with stories/status bar, create post FAB, pull-to-refresh. Competitors: Instagram, TikTok, Twitter.
An opinionated toast component for React.
Subscribe-to-read paywall with tier preview, price display, and CTA. Shows a blurred preview of gated content with clear upgrade path. Used in Novels for chapter unlocks and premium content across the platform.
A control that allows the user to toggle between a checked and not checked state.
A responsive table component.
A set of layered sections of content that are displayed one at a time.
Team/organization management page. Member list, role assignment, invitations, permissions, activity log. For Mukoko orgs, Nyuchi Web Services teams, B2B partners.
Displays a form textarea.
A succinct message that is displayed temporarily.
A toaster component to render toast notifications.
A two-state button that can be either on or off.
A set of two-state buttons that can be toggled on or off.
Crypto token display row with symbol, balance, and optional fiat value. Extracted from wallet-page.
A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
Transaction history page. Filterable list of all transactions with date grouping, search, and export. Shows transaction type, status, amount, and counterparty.
Full payment receipt with QR code, transaction ID, amount, parties, timestamp, and shareable format. Maps to wallet.transaction table. Used after successful payments, transfers, and purchases across Wallet, BushTrade, and Nhimbe.
A hook to detect if the current device is mobile.
A hook for managing toast notifications.
Utility functions including the cn classname helper.
Identity verification page. Multi-step verification flow: phone/OTP, government ID upload, selfie, biometric. Shows current tier and what unlocks at each level.
Connect/disconnect wallet button with truncated address display and network indicator. Supports Nyuchi custodial wallet (default) and self-custody upgrade path. Used across all Web3-enabled features.
Wallet page composition. Balance display, quick actions (send/receive/scan), recent transactions, and token portfolio. Competitors: M-Pesa, Revolut, Cash App. Supports MXT, MIT, NST, NHC tokens alongside fiat currencies.