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
Browse the full component library. Each component has a live preview, full source code, and an API tester to fetch it programmatically.
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.
Chronological action list with timeline pattern for dashboards and profiles.
Structured address form with street, city, state, postal code, and country fields with African countries prioritized.
Admin/back-office page. Tabbed admin interface with sidebar navigation, content area, and action bar. For Mukoko Console admin, B2B partner dashboards, org management.
Chronological event list grouped by date.
Complete AI conversation interface with message history, streaming, and suggested prompts.
Thumbs up/down rating for AI responses with optional text feedback.
Structured AI output card with markdown rendering and action buttons.
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.
KPI metric card with sparkline chart, period comparison (vs last week/month/year), and drill-down action. The standard analytics widget for the Nyuchi Console and all 7 Nyuchi product dashboards.
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.
Ancestral MIT display for deceased community members. Shows the person's fixed age, memorial badge, heritage data contribution status, and ancestral pool participation. Implements the visual layer of the MIT Ancestral Lifecycle Protocol.
Dismissible top-of-page banner for announcements with mineral-colored variants.
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.
Masked/revealable API key with copy and regenerate actions.
API quota visualization with current usage, rate limit status, and throttling indicator. Shows requests/second, daily quota, and monthly billing period. Used in Nyuchi API Platform dashboard and developer portal.
Ecosystem app selector popover with grid of Nyuchi app icons.
Medical appointment card showing provider name, specialty, date/time, location, and join/cancel actions. Maps to health.medical_appointment (Schema.org ScheduleAction). Used in Health mini-app and Nyuchi Medical provider views.
SVG radial arc gauge (270° sweep, open at bottom). Displays a percentage value as a filled arc with the value text centered inside. Uses stroke-dasharray animation. Proper role="meter" with aria-valuenow/min/max. Used for UV index, trust scores, completion percentages, health metrics, battery levels — any bounded numeric value. Production-proven in mukoko-weather MetricCard.
Nyuchi ecosystem architecture specification — local-first data strategy and sovereignty assessment.
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.
User/team member selector for task assignment. Shows avatar, name, and availability indicator. Supports single and multi-select. Used in task assignment, event organiser roles, Circle admin assignment, and any workflow where items are assigned to people.
Audio playback with progress bar, play/pause, and speed control.
Waveform visualization for audio recording, playback, and editing. Shows amplitude over time with playhead position. Used for voice notes in Campfire, audio content in Bytes, and podcast previews.
Audit event display with actor, action, target, timestamp.
Author profile card with avatar, bio, works count, subscriber count, revenue sharing indicator, and follow button. Maps to identity.person + novels.work tables. Used on novel detail pages and author directory.
Text input with async suggestion dropdown, loading states, and keyboard navigation.
An image element with a fallback for representing the user.
Overlapping avatar stack with +N overflow indicator for team displays.
Displays a badge or a component that looks like a badge.
Multi-select action toolbar that appears when items are selected in a table or list. Shows selected count with approve-all, reject-all, export, and custom action buttons. Used across all Nyuchi Console moderation and management views.
Asymmetric grid layout with varying tile sizes. Japanese-inspired content layout pattern for dashboards, feature showcases, and landing pages. Supports responsive breakpoint-aware tile resizing. Audit flagged as missing UX pattern. ALPHA — awaiting frontend implementation.
Billing & subscription management page. Current plan, usage meters, invoices, payment methods, upgrade CTA. Used by Nyuchi Web Services, B2B partners, and Mukoko premium subscribers.
Date/time availability grid for bookings. Shows available, partially available, and unavailable slots with mineral color coding. Used for vehicle booking (Transport), venue booking (Nhimbe), and appointment scheduling (Health).
Booking success card with full details, QR code, calendar-add button, and share action. The standard post-booking confirmation pattern across Nhimbe events, Transport bookings, and Health appointments. Maps to planner.reservation table.
Booking/reservation page. Service/ride selection, date/time picker, provider selection, confirmation. Used by transport, health, events.
Mobile slide-up panel with drag handle, backdrop, and slide-up animation.
Displays the path to the current resource using a hierarchy of links.
Concurrency isolation pattern inspired by Resilience4j Bulkhead. Limits how many concurrent calls can hit a single dependency so one slow service cannot consume all available connections and starve other operations. Named after ship bulkheads that prevent a single hull breach from sinking the whole vessel. Supports both semaphore-style (max concurrent) and queue-style (max waiting) isolation. Integrates with observability for tracking concurrent call counts and rejection rates.
Displays a button or a component that looks like a button.
Groups related buttons together.
A date field component that allows users to enter and edit dates.
Single-day time grid with hourly slots and event blocks.
Full month calendar grid with event dots, today indicator, and day cell click handler. Complements calendar-day-view and calendar-week-view to complete the three standard calendar views. The month grid is the most common calendar entry point across all apps.
7-column weekly calendar view with hourly time slots.
Camera preview overlay with branded recording indicator, timer display, and effects panel trigger. The creation entry point for Bytes short-form video and Campfire media messages. Pill-shaped record button with malachite accent.
Chart.js Canvas-based chart renderer for data-heavy dashboards. Use INSTEAD of the Recharts chart when you have 100+ data points per chart or multiple charts per page. Canvas renders everything to a single DOM element regardless of data volume, while SVG (Recharts) creates a DOM node per data point. Includes CSS variable resolution for Canvas 2D context (which cannot read var() natively), theme-aware color fallbacks, mobile performance optimisation (reduced DPR, disabled animations), and automatic Chart.js instance cleanup on unmount to prevent canvas memory leaks. Production-proven in mukoko-weather with 7 charts × 365 data points.
Overlay text editor for video captions and story text. Supports font selection (Noto Sans/Serif), text color from mineral palette, position dragging, and size adjustment. Used in Bytes and story creation.
Displays a card with header, content, and footer.
A carousel with motion and swipe built using Embla.
Shopping cart line item with quantity controls and remove action.
Grid of browsable categories with icons, counts, and mineral-colored accents.
Version update card with categorized changes.
Chaos testing utilities for injecting random errors and latency to test resilience.
Table of contents / chapter navigation for serialized works. Shows chapter titles, word counts, publish dates, and locked/unlocked status for subscription-gated content. Maps to novels.chapter table.
Optimized long-form reading view with page/scroll modes, bookmark, highlight, and note-in-margin functionality. Adjustable Noto Serif typography. The core reading experience for Novels, competing with Wattpad and Tapas reader quality.
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.
Single message display with sent/received variants, avatar, timestamp, and status.
Message composer with auto-growing textarea, send button, and keyboard shortcuts.
Full chat page layout with sidebar conversations and main chat area.
Scrollable conversation list with unread counts and active highlight.
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.
Interactive checklist with add, reorder, and completion tracking.
Checkout/order page. Cart summary, shipping, payment method selection, order confirmation. Multi-step with progress indicator.
Netflix Hystrix-inspired circuit breaker with CLOSED/OPEN/HALF_OPEN state machine.
Multi-author display showing all co-authors with their revenue split percentages. Compact inline strip for novel headers and detail pages. Maps to novels.work_contributor with revenue_share_pct.
Enhanced code display with language badge, line numbers, copy button, and filename.
Code input with line numbers, monospace font, and tab key support.
Tabbed code display for multiple languages/frameworks.
An interactive component which expands and collapses a panel.
Color selector with hex input and preset swatches including Five African Minerals.
Autocomplete input and command palette with a list of suggestions.
Fast, composable, unstyled command menu for React.
Spotlight-style command palette with search, grouped results, and keyboard hints.
Inline paragraph-level commenting — the Medium-style annotation pattern. Users highlight text in a chapter and leave comments anchored to that specific passage. Maps to a future comments schema on novels.chapter.
Threaded comments with nested replies and actions.
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.
Contact information card with avatar, details, and action links for call and email.
Editorial calendar showing scheduled content across a week or month view. Drag-and-drop scheduling, content type color coding, and publish status indicators. Used in Mukoko News editorial management and Bytes creator scheduling.
Displays a menu to the user triggered by a right click.
Accessibility mode switcher supporting light, dark, high-contrast, and system-preference modes. Goes beyond simple dark mode to include APCA 3.0 AAA high-contrast for users with visual impairments.
GDPR/POPIA-compliant consent banner with accept, decline, and manage options.
A button that copies text to the clipboard with visual feedback on success.
Multi-currency numeric input with currency switcher supporting MXT, ZWL, USD, ZAR, KES, and mobile money codes. Formats values per locale with proper decimal handling. The standard financial input for all payment flows across the ecosystem.
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 powerful table with sorting, filtering, pagination, and column visibility powered by TanStack Table.
Smart date display that shows relative time for recent dates ("2 hours ago", "yesterday") and absolute dates for older ones ("15 May 2026"). Respects locale from nyuchi-locale. A micro-primitive used everywhere — message timestamps, card metadata, activity feeds, task due dates.
A date picker component with calendar popover, supporting single date and date range selection.
Dual-calendar popover for selecting date ranges with preset quick-selects.
Visual dependency/relationship display between items — task depends on task, event requires event, etc. Shows directed edges between nodes. Used in project planning (Planner), workflow visualization (Console), and content relationship mapping.
Service health card showing uptime percentage, error rate, response time (p50/p95/p99), and last deploy timestamp. Mineral color coding: malachite=healthy, gold=degraded, terracotta=down. Used in the Nyuchi Console infrastructure dashboard.
Semantic key-value display using dl/dt/dd elements.
A window overlaid on the primary window, rendering content underneath inert.
A provider to set the text direction for the application.
Grip indicator for drag-and-drop reordering.
A drawer component for React built on top of Vaul.
Driver/operator card with photo, rating, vehicle info, verification badge, and trip count. Maps to identity.person + transport tables via Nyuchi Logistics. Used in Transport booking confirmation and ride-matching.
Displays a menu to the user triggered by a button.
Displays an empty state with an icon, title, and description.
Raw empty state primitive with icon, title, description, and call-to-action slots. No brand opinion. Use nyuchi-empty-state (Layer 3) for the branded ecosystem version with mineral accents.
API endpoint display with method badge, path, and description.
Key-value environment variable editor with secret masking.
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.
BushTrade escrow payment status tracker. Shows payment lifecycle stages: initiated → held → released/disputed. Maps to wallet.payment_intents with escrow state. Used in BushTrade transaction views and seller dashboards.
Time-ranged event block for rendering inside calendar day/week grids. Shows title, time span, and color category. Supports overlapping events with column stacking. The visual unit that populates calendar-day-view and calendar-week-view slots.
In-chat event RSVP card shared in Campfire conversations. Compact event preview with date, venue, and quick RSVP buttons (Going/Maybe/Decline). Maps to events.rsvp_action. Bridges Nhimbe events into the Campfire messaging flow.
Currency pair display with live rate, conversion calculator, and trend indicator. Supports MXT ↔ fiat pairs across 42 African currencies. Used in Wallet swap interface and BushTrade cross-border commerce.
Sequential fallback strategy — try stages in order, return first success.
Route fare display with breakdown by segment, applicable discounts, and total. Supports multi-currency display. Used in Transport for route cost estimation before booking.
Feature flag row with name, description, environment toggles (dev/staging/production), and rollout percentage slider. Used in the Nyuchi Console feature management dashboard.
A form field component with label, description, and message.
File preview card with icon, name, and size display.
A drag-and-drop file upload zone with file list, size validation, and remove actions.
A horizontal bar of toggleable filter chips with optional counts and a clear button.
Reader customization panel for font size, line height, theme (light/dark/sepia), font family (Noto Sans/Serif/system), and text alignment. Persisted per-user in the Digital Twin preferences. Used in Novels reader and News article reader mode.
Building forms with React Hook Form and Zod.
Transaction cost preview showing estimated gas fee in NHC with fiat equivalent. Highlights that MIT holders have static gas prices per Honeycomb protocol. Used before any on-chain transaction in Wallet.
Circle/group info header with cover image, name, description, member count, privacy status, rules summary, and admin list. Used at the top of Circle detail pages and group settings. Maps to circles.circle table.
Health dashboard page. Vitals overview, activity rings, medication reminders, upcoming appointments, health score. Competitors: Apple Health, MyFitnessPal, Babylon.
Encrypted health record summary card showing recent visits, active prescriptions, allergies, and conditions. Data sourced from the sovereign Digital Twin pod — NEVER from Supabase. Respects Covenant One.
Horizontal scroll container with CSS scroll-snap for mobile-friendly card browsing. Hides scrollbar, supports snap-to-item alignment. Used for hourly forecast cards, category browsers, story rings, product carousels, and any horizontal list that should swipe naturally on mobile. Proper role="list" with keyboard navigation.
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.
IntersectionObserver-based scroll sentinel for loading more content.
Simple label + value display row with optional icon. Used on detail pages for key-value information: "Temperature: 28°C", "Location: Harare", "Status: Active". Compact single-line layout with icon left, label middle, value right-aligned. Production-proven in mukoko-weather for atmospheric details.
Infrastructure monitoring page. Service health grid, deployment history, resource utilization gauges, incident timeline. For Nyuchi Web Services ops. Competitors: Datadog, New Relic.
Click-to-edit text field that transforms from display mode to input mode on interaction. Pattern for low-friction editing in admin tables, settings pages, and profile fields. Supports validation, optimistic save, and revert on escape. Audit flagged as missing UX pattern. ALPHA — awaiting frontend implementation.
Displays a form input field.
Groups input, button, and addon elements together.
Accessible one-time password component with copy paste functionality.
Shareable invite card with QR code, copyable link, expiry countdown, and usage count. Used for Circle invitations, event invites (Nhimbe), and referral links. Mineral-colored QR code.
Invoice line item with date, amount, status badge, and download.
A flexible item component for lists, menus, and settings.
Multi-leg journey planner view showing sequential stops with transport modes, transfer points, and timing. Used in Transport for commute planning and in Planner for multi-event day views.
Job board/listings page. Search, filters (location, type, salary, industry), list of job cards. Competitors: LinkedIn, Indeed, Glassdoor.
Collapsible JSON tree view with syntax coloring and type indicators.
Column-based board for organizing items by status with drag indicators.
Displays a keyboard shortcut or key combination.
Key Performance Indicator card. Displays a metric label, large value, optional change percentage with trend direction. Extracted from analytics-dashboard-page, console-dashboard-page, and wallet-page where the same pattern was repeated inline. Brand-agnostic — uses semantic CSS vars only.
Renders an accessible label associated with controls.
In-app language selector with locale display. Prioritizes the 16 Zimbabwean official languages (Shona, Ndebele first), then African languages, then global. Shows current language with flag/code indicator. Critical for a platform serving 54 countries and 2000+ languages.
TikTok-style progressive lazy section with sequential mount queue and bidirectional visibility. Only ONE section mounts at a time via a global FIFO queue, preventing DOM/Canvas surges that OOM mobile browsers. Sections unmount when scrolled far off-screen (1500px margin) to cap peak memory. Adaptive timing: 150ms settle on mobile, 50ms on desktop. Production-proven in mukoko-weather with 7 Chart.js sections. The design portal's most critical performance primitive.
Learning/education page. Course content, lesson progress, quiz area, notes. Competitors: Duolingo, Coursera, Khan Academy.
Full-screen image viewer with gallery navigation.
Interactive map-based location selection form control. User taps/clicks map to set coordinates, with search input for address lookup. Returns lat/lng and formatted address. Used in event creation (Nhimbe), business listing (BushTrade/Places), and any form that needs a geographic input.
Live/static location sharing card in chat. Shows a mini map preview with pin, address, and share duration (for live). Used in Campfire for meeting coordination, Transport for pickup points, and Places for recommendations.
Scrollable filterable log output with severity coloring and auto-scroll.
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.
Full-page maintenance mode display with estimated return time.
Floating preview card that appears on map marker interaction. Shows a compact listing-card inside the map context with image, title, category, and action. Bridges the map view to the listing detail flow.
Grouped marker display for high-density map areas. Shows count badge with mineral accent and expands on interaction. Used when multiple listings/places overlap at the current zoom level.
Custom branded map pin with mineral-colored variants and verification tier indicators. Supports default, verified, featured, and cluster states. The pin shape uses the Nyuchi pill radius for consistency. Maps to places.places and events.event tables.
Map/navigation page. Full-screen map with search, pin details, route overlay, bottom sheet for location info. Competitors: Google Maps, Uber, Bolt.
Route visualization overlay for map with waypoints, distance, and estimated time. Supports driving, walking, transit, and cycling modes. Used by Transport mini-app for commute planning and route display.
Embeddable map container with design system tokens, mineral-colored controls, and branded attribution. Wraps Mapbox GL JS with Nyuchi theme integration. Supports tile layers, zoom controls, geolocation, and fullscreen toggle. The foundational map primitive for Places, Transport, BushTrade, Nhimbe, and any app that shows a geographic context.
Themed markdown-to-HTML renderer with design system typography and colors.
Marketplace/storefront browsing page. Search, category filters, grid/list toggle, product cards. Competitors: Jumia, Amazon, Alibaba, Facebook Marketplace.
CSS columns-based variable-height grid layout.
Horizontal scrollable filter/effect picker — the TikTok/Instagram paradigm. Shows filter previews as circular thumbnails with names. Applies visual effects to camera preview or captured media. Used in Bytes creation flow.
Full-screen media player page. Video/audio player with controls, comments, related content. Competitors: YouTube, TikTok, Netflix, Spotify.
Medication schedule card with drug name, dosage, timing intervals, adherence tracking, and snooze/take actions. Maps to health.medication_reminder table. Stores reminders in the sovereign Digital Twin pod.
Full-width flyout navigation with columns of links grouped by section.
Scrollable member directory with role badges (admin/moderator/member), online status dots, join date, and search filtering. Used in Circle member management and event attendee lists. Maps to circles.circle_membership table.
User/member display row with avatar, name, email/subtitle, role badge, and status indicator. Extracted from team-management-page and chat-page. Brand-agnostic primitive.
Text input with @mention autocomplete for users.
A visually persistent menu common in desktop applications.
Nested reply thread with indentation and collapse/expand.
MFA enrollment card with QR code and verification step.
Payment method picker for African mobile money services — EcoCash, MTN MoMo, Airtel Money, M-Pesa, and Innbucks. Shows provider logo, phone number input, and USSD code reference. This is HOW Africa pays — the primary payment primitive for the continent.
Content review item showing flagged content preview, report reason, reporter info, and approve/reject/escalate action buttons. Maps to system.content_moderation. Used in the Nyuchi Console moderation dashboard.
Audio track browser and selector for video creation. Search, preview, and attach music tracks to Bytes content. Shows track name, artist, duration, and waveform preview. Used in Bytes post-capture editing.
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 native HTML select element styled to match the design system.
A collection of links for navigating websites.
Proximity-sorted results list designed to pair with a map view. Shows distance, direction indicator, and listing preview. Standard split-view pattern for BushTrade browse, Places discovery, Nhimbe nearby events, and Transport nearby stops.
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.
Honeycomb node health and earnings display. Shows node type (consumer/business/infrastructure), uptime, storage contributed, NHC earned, and peer count. Used in the Honeycomb network dashboard.
Compact note display with title, excerpt, and timestamp.
Rich note editing interface with title, body (markdown or rich text), tags, and auto-save indicator. Supports inline images, checklists, and code blocks. The creation/editing counterpart to note-card (display). Reusable in any app that needs structured note capture.
A notification bell icon with unread count badge and a popover panel listing notifications.
Notification center with tabs for all, unread, and mentions with grouped items.
Full-screen or drawer notification management surface. Extends notification-center (existing Layer 2 component) with filter/search, archive, bulk actions, and grouped conversations view. Audit flagged as missing UX pattern for mature notification UX. ALPHA — awaiting frontend implementation.
Notification feed with read/unread states, timestamps, and date grouping.
Book/manga cover display with genre badge, rating, chapter count, and status indicator (ongoing/completed/hiatus). Aspect ratio optimized for book covers (2:3). Maps to novels.work table.
Numeric input with increment and decrement buttons, min/max/step support.
Accessibility infrastructure for the Nyuchi ecosystem. Exports FocusTrap (modal/overlay focus containment), LiveRegion (screen reader announcements for dynamic content), SkipNav (keyboard skip-to-content link), VisuallyHidden (screen-reader-only text), and a11y token definitions (focus ring styles, minimum touch targets, contrast-safe mineral pairings). Also exports useAnnounce hook for imperatively announcing trust score changes, notification arrivals, loading completions, and other dynamic updates to screen readers. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
AI context provider for N10. Generates context windows for AI assistants (Claude, Cursor, Copilot, Windsurf) with current ecosystem model, node architecture, and coding rules. No hardcoded counts — always accepts live values from get_system_counts(). Used by the MCP server and IDE integrations.
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.
Changelog renderer for N10. Reads from the public.changelog table and renders a visual timeline of releases with affected ecosystem nodes (colour-coded by axis), components added/modified/deprecated, and version labels.
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.
Data fetching and state management bridge between the 7-layer architecture and the UI. Exports useNyuchiQuery hook (local-first fetch: try SQLite/IndexedDB → edge D1 → cloud Supabase, with automatic background sync), NyuchiListView (declarative feed composition: listing-card + infinite scroll + pull-to-refresh + empty state + skeleton + error card), NyuchiSearchView (search input + filter bar + results + recent searches), and optimistic update utilities. Every data-driven screen in every Nyuchi app uses these patterns instead of raw fetch calls. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Documentation API for N10. Runs as part of the api.nyuchi.dev Cloudflare Worker (Rust/WASM), NOT a Supabase Edge Function. Serves documentation pages, AI instructions, architecture nodes, and changelog entries from the Supabase database via PostgREST. Endpoints: /docs, /ai-instructions, /architecture, /changelog, /counts. All responses use node language (ecosystem_node, nodes_affected). Public read access, no auth required.
Documentation rendering engine for N10. Full-screen docs portal with sidebar navigation, search (title + description + keywords), MDX-delegate content rendering, related ecosystem node badges, and keyboard navigation. Reads from documentation_pages via nyuchi-docs-api.
Developer experience infrastructure for the Nyuchi Design System. Exports component status definitions (alpha/beta/stable/deprecated with visual indicators), component documentation schema (usage guidelines, do/dont examples, accessibility notes, keyboard interactions, screen reader behavior stored in component_docs table), contribution guidelines (how to propose, build, review, and ship new brand components), migration utilities (deprecation warnings, codemod helpers), and usage analytics types (which components are used, by which apps, how frequently). Also exports a ComponentPlayground wrapper for interactive component previews. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Pre-wiring node that connects every brand component to the full Nyuchi infrastructure stack. Exports NyuchiHarness (declarative wrapper providing error boundary + skeleton + observability + motion + a11y) and useNyuchiHarness hook (imperative access to observability logger, motion config, locale, theme, and health reporting). When a component is wrapped in a harness, it automatically logs render timing, catches errors with branded fallback, applies entry animations, uses the correct focus ring tokens, respects reduced-motion preferences, and reports health to the global monitor. Zero manual configuration required — install the component and it works. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Central icon registry for the Nyuchi Design System. Maps semantic icon names to Lucide React icons. All components should import icons from this registry, not directly from lucide-react. Provides: consistent sizing (16/20/24/32), brand icon overrides, semantic naming (icon-success vs CheckCircle), tree-shaking optimization, and custom Nyuchi icons. N1 infrastructure — consumed by all layers above. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Responsive and adaptive layout system for Nyuchi. Exports breakpoint tokens (mobile/tablet/desktop/wide), useBreakpoint hook, NyuchiGrid responsive grid component, canonical layout definitions for the five core page types (feed, detail, create, profile, dashboard), and adaptive density support (comfortable vs compact). Ensures consistent responsive behavior across all Nyuchi apps — same breakpoints, same grid, same content flow patterns. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Internationalization infrastructure for the Pan-African Nyuchi platform. Exports NyuchiLocaleProvider (React context for locale, text direction, number/date/currency formatting), useLocale hook (access formatting functions), useDirection hook (RTL/LTR detection), locale-aware formatters for dates (relative and absolute), currencies (multi-currency with ZWL/ZAR/USD/KES support), numbers, and relative time. Supports all 16 Zimbabwean official languages. String token system for UI labels with locale variants so buttons, headings, and system text can be swapped without code changes. Bridges to the lingo schema in nyuchi_platform_db. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Motion token system defining the Nyuchi animation language. Includes four duration tiers (quick/standard/emphasis/dramatic), four easing curves (entrance/exit/spring/bounce), choreography patterns (list stagger, cascade, ripple), and reduced-motion fallbacks. Respects prefers-reduced-motion at the token level. Exports CSS keyframes, React transition presets, and a useMotion hook. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Platform-specific utilities for PWA, native integration, and cross-platform behavior. Exports NyuchiInstallPrompt (branded PWA "Add to Home Screen" experience), NyuchiShareSheet (Web Share API with fallback), usePlatform hook (detect iOS/Android/web/PWA), useHaptics (haptic feedback with graceful degradation), and platform-aware navigation patterns. Makes every Nyuchi app feel native regardless of how it is accessed. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
Self-monitoring, self-healing resilience node that wires observability, circuit-breaker, bulkhead, rate-limiter, retry, timeout, fallback-chain, and chaos testing into a single composition for brand components. Implements all 7 Resilience4j patterns (Netflix Hystrix successor): CircuitBreaker, Retry, RateLimiter, Bulkhead, TimeLimiter, FallbackChain, and ChaosInjection. Exports NyuchiSection (wraps any UI section with error boundary + skeleton + observability + health tracking), useResilientFetch (data fetching with full resilience stack), NyuchiHealthMonitor (singleton aggregating health across all sections), NyuchiHealthPanel (admin health visualization), and the withResilience decorator that composes all patterns in the correct order. Every brand component renders inside a NyuchiSection so the infrastructure permanently monitors itself. Target: Rust compiled to WebAssembly. wasm-bindgen exposes the interface to SvelteKit. One Rust codebase compiles to both WASM (browser) and native binary (server).
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.
W3C Design Tokens (2025.10) compliant token system for the entire Nyuchi ecosystem. Three-tier architecture: primitive tokens (Five African Minerals with light/dark pairs, container/onContainer colours, Five Heritage Colors, spacing, type scale, radii, shadows, motion, touch targets), semantic tokens (four-level AAA surface system), and component tokens. Brand overrides for all mini-apps. Multi-platform output: CSS (web), TypeScript (React/Svelte), Swift (iOS/macOS), Kotlin (Android/Compose), ArkTS (HarmonyOS), React Native (iOS+Android), Rust (services), Python (analytics/ML). The N1 vertical node — the only node allowed to define values. Every other node reads from here via var() or the relevant platform constant.
Nyuchi Design Tokens for ArkTS / ArkUI. Auto-generated from nyuchi-tokens. Exports color constants, spacing, radius, and typography for HarmonyOS. Five African Minerals + Five Heritage Colors. Same token system as the web CSS output. Critical for Mukoko reach on Huawei devices across Africa.
Nyuchi Design Tokens for Kotlin / Jetpack Compose. Auto-generated from nyuchi-tokens. Exports Color objects, spacing Dp values, radius, and typography constants for Android. Five African Minerals + Five Heritage Colors. Same token system as the web CSS output — one palette, every platform.
Nyuchi Design Tokens for Python. Auto-generated from nyuchi-tokens. Exports frozen dataclasses of color values for analytics pipelines, data visualisation (matplotlib, plotly, altair), report generation, and ML tooling. Ensures consistent Nyuchi branding across all Python-generated outputs.
Nyuchi Design Tokens for React Native. Auto-generated from nyuchi-tokens. Exports StyleSheet-compatible TypeScript constants for iOS and Android React Native apps. Five African Minerals + Five Heritage Colors. Same token system as the web CSS output.
Nyuchi Design Tokens for Swift / SwiftUI. Auto-generated from nyuchi-tokens. Exports Color extensions, spacing, radius, and typography constants for iOS, macOS, watchOS, and tvOS. Five African Minerals + Five Heritage Colors. Same token system as the web CSS output — one palette, every platform.
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.
Structured logging, performance measurement, and error tracking with the [mukoko] prefix.
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.
Order total breakdown with line items and total.
Organization/business profile page. Logo, description, verification status, team members, location, hours, products/services tabs. For businesses, NGOs, government entities on the platform.
Standard page header with breadcrumbs, title, description, and action slot.
Pagination with page navigation, previous and next links.
Visual password strength meter with requirement checklist.
Payment method display with card brand and last four digits.
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.
Secure numeric keypad for transaction PIN confirmation. Full-screen overlay with biometric fallback option. Mineral accent on confirm button. Never logs PIN values. Used before any financial transaction in Wallet.
Role/permission indicator badge with color coding.
Phone number input with country code selector, African countries prioritized.
Pinned/starred message display banner in chat header area. Shows the pinned message content with unpin action and tap-to-scroll-to behavior. Used in Campfire conversations and Circles channels.
Personal sovereign pod storage usage visualization. Shows total allocation, used space by category (messages, media, documents, AI models), and upgrade path via NST. Data from Layer 1 (Pod) of the 7-layer data architecture.
In-chat poll creation and voting interface. Supports single-choice and multi-choice with real-time vote counts and percentage bars. Used in Campfire group chats and Circles community channels. Mineral-colored progress bars.
Displays rich content in a portal, triggered by a button.
Formatted price with currency, original price, and discount badge.
A pricing tier card with plan name, price, feature list, CTA button, and optional highlight badge.
Task/item priority picker with visual indicators — none, low, medium, high, urgent. Mineral-colored dots: grey=none, cobalt=low, gold=medium, terracotta=high, destructive=urgent. Compact inline selector for use in task forms, issue trackers, and ticket systems.
Displays an indicator showing the completion progress of a task.
Expandable AI prompt input with send/stop buttons and streaming support.
Key-value pair display with labels, values, and optional copy actions.
Mobile pull-down-to-refresh gesture handler.
Grid of quick action buttons with icon and label. Extracted from wallet-page and console-dashboard-page.
A set of checkable buttons where only one can be checked at a time.
Token bucket rate limiter inspired by Resilience4j RateLimiter. Controls request frequency to protect API quotas (Tomorrow.io, Anthropic, government registries) and prevent thundering herd problems. Supports configurable limits per time window, burst allowance, and queue-based waiting. Integrates with observability for tracking request rates, rejections, and quota utilization. Critical for the Nyuchi 7-layer architecture where multiple data sources have different rate limits.
An interactive star rating component with hover preview, read-only mode, and mineral gold accent.
Emoji reaction selector popover with counts.
Seen-by indicator with avatar stack showing who has read a message. Expandable to full list. Shows read timestamps. Maps to campfire.message read status. The WhatsApp blue-tick pattern.
Book/series progress bar with chapter markers. Shows current position in the overall work and estimated time remaining. Mineral-colored progress fill. Used at the top of the reader and on novel cards.
Record/pause/stop button group with timer display and recording state indicators. The standard media capture control bar. Used in Bytes (video), Campfire (voice notes), and any creation flow involving recording.
Recurrence pattern selector for scheduling — daily, weekly, monthly, yearly with day-of-week/month selectors and end-date or occurrence-count options. Used for recurring tasks, events, medication schedules, and any repeating item across the platform.
Notification-style reminder card with title, due datetime, snooze/dismiss actions, and recurrence indicator. Used for task deadlines, appointment reminders, medication timing, and any time-triggered alert across the platform.
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.
Retry with exponential backoff, jitter, and configurable retry predicates.
Creator and platform revenue metrics with earnings chart, payout history, next payout date, and revenue split visualization. Used in creator dashboards (Novels, Bytes) and Nyuchi Console financial overview.
Review or testimonial display with star rating, author info, and review text.
Simple WYSIWYG editor with toolbar for bold, italic, heading, list, and link formatting.
Role picker with descriptions and permission previews.
Transit route display showing stops, estimated time, fare, and transport mode (bus, kombi, train). Maps to transport.transit_route. Used in Transport mini-app route search results.
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.
JSON schema tree display with type badges.
Augments native scroll functionality for custom, cross-browser styling.
A search input with keyboard shortcut support, clear button, and command palette integration.
Standard search results page with filters, result items, and pagination.
Section-level error boundary for the 5-layer architecture with retry, named sections, and observability logging.
Section divider with title, description, action, and mineral accent.
Connected multi-option selector as a single pill-shaped control. Inline alternative to radio-group for 2-4 mutually exclusive options like view mode switchers, time range selectors, or binary choices. Audit flagged as missing primitive. ALPHA — awaiting frontend implementation.
Displays a list of options for the user to pick from, triggered by a button.
Multi-step money transfer flow: recipient selection → amount entry → confirmation → receipt. Supports QR scan, contact picker, and recent recipients. The standard peer-to-peer transfer pattern for Wallet and Campfire bill splitting.
Visually or semantically separates content.
Service health status card with name, status dot, uptime, and latency. Extracted from infrastructure-page.
Active session display with device, location, and revoke.
Two-column settings page layout with sticky sidebar navigation.
Color-coded severity indicator with mineral-mapped colors. Levels: low (malachite), moderate (gold), high (terracotta/orange), severe (red), extreme (dark red), cold (cobalt). Used for weather alerts, health risk levels, trust warnings, content moderation flags, and any graduated severity display. Production-proven in mukoko-weather FrostAlertBanner.
A share dialog with copy-to-clipboard, social media links, and native share support.
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.
Citation card linking AI responses to source documents.
A loading spinner component.
Bill splitting interface for group payments in Campfire. Supports equal split, custom amounts per person, and tip. Shows each participant with their share and payment status. Maps to wallet.payment_intents.
Responsive master-detail layout that collapses on mobile.
A metric card displaying a value with optional trend indicator, icon, and description.
Colored status dot with optional label. Uses semantic status tokens. Extracted from console-dashboard-page, infrastructure-page, and logs-page where colored dots indicated service health inline.
A status dot with optional label indicating online, offline, busy, away, or live states.
Horizontal step progress indicator for multi-step flows. Shows current progress as filled/unfilled segments. Extracted from payment-page, checkout-page, booking-page, and verification-page. Brand-agnostic.
Multi-step wizard navigation with horizontal/vertical orientation variants.
Position-sticky container for headers or action bars.
Transit stop card showing stop name, arriving vehicles with ETAs, and distance from user. Maps to transport.transit_stop (bus stops, train stations, kombi ranks, taxi ranks). Used in Transport stop detail and nearby-stops views.
Ephemeral content creation interface combining camera viewfinder, text overlay, sticker placement, and drawing tools. Used for story/status content that expires after 24 hours. Maps to the Pulse content feed.
Typewriter effect text renderer for streaming LLM output.
Plan comparison card with features, price, and CTA.
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.
Scrollable prompt chips for AI conversations.
A control that allows the user to toggle between a checked and not checked state.
Guided symptom input with body region selector, severity scale, and duration fields. Not a diagnostic tool — produces a structured symptom summary for telemedicine consultations. Used in Health mini-app pre-appointment flow.
A responsive table component.
A set of layered sections of content that are displayed one at a time.
Token-based input for multiple values as dismissible badges.
Draggable task card for use in kanban boards, task lists, and project management views. Shows title, priority indicator, due date, assignee avatar, labels, and subtask progress. Composable into kanban-board columns, list views, or calendar day slots. A reusable building block for any task-driven interface.
Team/organization management page. Member list, role assignment, invitations, permissions, activity log. For Mukoko orgs, Nyuchi Web Services teams, B2B partners.
Video call interface card for virtual consultations. Shows call status, timer, mute/camera toggle, and end call button. Integrates with the Health mini-app and Nyuchi Medical for scheduled and on-demand consultations.
Dynamic text sizing control for readability. Supports preset sizes (small/default/large/extra-large) and custom scaling. Persisted in user preferences. Critical for accessibility across diverse user needs.
Displays a form textarea.
Hour and minute selector with optional AM/PM toggle.
Reusable Canvas-based time series chart with multi-series support, dual Y-axes, mixed line/bar types, custom tooltip and tick formatters. Built on canvas-chart. Draws lines, areas, and bars on a single canvas element. Production-proven in mukoko-weather for temperature trends, precipitation, humidity, UV index, and wind speed charts. Use this instead of composing individual Recharts chart blocks when you need a data-driven chart with dynamic series.
Selectable grid of available time slots for booking.
Elapsed time display with start/stop/pause controls. Shows running timer, accumulated time, and optional description. Used for time tracking on tasks, billable hours in Nyuchi Tools, and focus sessions.
A vertical timeline for displaying chronological events with mineral-colored dots.
Promise timeout wrapper. Rejects with TimeoutError if an async operation exceeds the specified duration.
A succinct message that is displayed temporarily.
A toaster component to render toast notifications.
Checkable task item with priority, due date, and assignee.
A two-state button that can be either on or off.
A set of two-state buttons that can be toggled on or off.
Multi-token balance overview showing all four Mukoko tokens (MIT, MXT, NST, NHC) with individual balances, fiat equivalents, and combined portfolio value. Maps to wallet.balance and wallet.mit_token tables.
Crypto token display row with symbol, balance, and optional fiat value. Extracted from wallet-page.
Horizontal container for grouped tool actions. Persistent action bar pattern for editors, content creation, and admin surfaces. Supports segmented groups, overflow menu, and responsive collapse. Audit flagged as missing UX pattern. ALPHA — awaiting frontend implementation.
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.
Dual-list selector with search filtering and arrow buttons to move items between panels.
Shows translation status and language of content. Indicates whether content is original, machine-translated, or community-translated. Links to Lingo for translation contribution. Used on articles, listings, and chat messages.
Hierarchical expandable/collapsible node list for nested data.
Animated dots showing someone is typing.
A set of typographic components for consistent text styling.
Monitor JS heap memory pressure via Performance Memory API.
A hook to detect if the current device is mobile.
A hook for managing toast notifications.
Admin user management table row with avatar, name, email, role badge, verification tier, last active timestamp, and action dropdown (edit role, suspend, delete). Used in all Nyuchi product admin panels.
Utility functions including the cn classname helper.
Vehicle listing card with photo, specs, availability calendar, driver rating, and booking CTA. Maps to Nyuchi Logistics fleet data. Used in Transport vehicle booking and BushTrade delivery options.
Identity verification page. Multi-step verification flow: phone/OTP, government ID upload, selfie, biometric. Shows current tier and what unlocks at each level.
Identity/business verification submission card with submitted evidence preview, tier requested, applicant info, and approve/reject/request-more actions. Maps to system.unified_submissions and system.verification_tier.
Themed video player wrapper with custom controls.
Timeline scrubber for video editing with frame preview thumbnails, start/end handles, and playhead. Supports pinch-to-zoom on mobile for precise trimming. Used in Bytes post-capture editing flow.
Virtualized list for large datasets using CSS transforms.
Health metrics visualization showing blood pressure, heart rate, BMI, temperature, and custom vitals. Chart-based trend view with mineral-colored ranges (normal=malachite, warning=gold, critical=terracotta). Data from sovereign pod.
Inline voice message player with waveform visualization, play/pause, speed control (1x/1.5x/2x), and duration. The WhatsApp-standard voice message pattern adapted for the Nyuchi ecosystem with mineral accent on the waveform.
For/against/abstain voting interface with visual weight display. Shows current vote distribution and the user's selected option. Mineral colors: malachite=for, terracotta=against, gold=abstain. Used in DAO governance proposals.
Visual card representation for digital wallet display. Shows token type (MIT/MXT/NST/NHC), balance, and card design with mineral gradient. Swipeable between multiple token cards. Maps to wallet.balance table.
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.
Webhook endpoint configuration display with status.