Components

A vertically stacked set of interactive headings that reveal content.

Displays a callout for important information.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a desired ratio.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge.

Displays the path to the current resource using a hierarchy of links.

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.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

Beautiful charts built using Recharts. Copy and paste into your apps.

A control that allows the user to toggle between checked and not checked.

An interactive component which expands and collapses a panel.

Autocomplete input and command palette with a list of suggestions.

Fast, composable, unstyled command menu for React.

Displays a menu to the user triggered by a right click.

A window overlaid on the primary window, rendering content underneath inert.

A provider to set the text direction for the application.

A drawer component for React built on top of Vaul.

Displays a menu to the user triggered by a button.

Displays an empty state with an icon, title, and description.

A form field component with label, description, and message.

Building forms with React Hook Form and Zod.

For sighted users to preview content available behind a link.

Displays a form input field.

Groups input, button, and addon elements together.

Accessible one-time password component with copy paste functionality.

A flexible item component for lists, menus, and settings.

Displays a keyboard shortcut or key combination.

Renders an accessible label associated with controls.

A visually persistent menu common in desktop applications.

A native HTML select element styled to match the design system.

A collection of links for navigating websites.

Pagination with page navigation, previous and next links.

Displays rich content in a portal, triggered by a button.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons where only one can be checked at a time.

Accessible resizable panel groups and layouts with keyboard support.

Augments native scroll functionality for custom, cross-browser styling.

Displays a list of options for the user to pick from, triggered by a button.

Visually or semantically separates content.

Extends the Dialog component to display content that complements the main content of the screen.

A composable, themeable and customizable sidebar component.

Used to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

An opinionated toast component for React.

A loading spinner component.

A control that allows the user to toggle between a checked and not checked state.

A responsive table component.

A set of layered sections of content that are displayed one at a time.

Displays a form textarea.

A succinct message that is displayed temporarily.

A toaster component to render toast notifications.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.

A powerful table with sorting, filtering, pagination, and column visibility powered by TanStack Table.

A date picker component with calendar popover, supporting single date and date range selection.

A set of typographic components for consistent text styling — headings, paragraphs, blockquotes, lists, and inline code.

A search input with keyboard shortcut support, clear button, and command palette integration.

A user profile dropdown menu with avatar, name, email, navigation links, and sign-out action.

A metric card displaying a value with optional trend indicator, icon, and description.

A horizontal bar of toggleable filter chips with optional counts and a clear button.

A share dialog with copy-to-clipboard, social media links (X, LinkedIn, Email), and native share support.

A notification bell icon with unread count badge and a popover panel listing notifications.

A drag-and-drop file upload zone with file list, size validation, and remove actions.

A button that copies text to the clipboard with visual feedback on success.

A status dot with optional label indicating online, offline, busy, away, or live states.

A vertical timeline for displaying chronological events with mineral-colored dots.

A pricing tier card with plan name, price, feature list, CTA button, and optional highlight badge.

An interactive star rating component with hover preview, read-only mode, and mineral gold accent.

A hook to detect if the current device is mobile.

A hook for managing toast notifications.

Utility functions including the cn classname helper.

Structured logging, performance measurement, and error tracking with the [mukoko] prefix.

A React error boundary component that catches render errors and displays a fallback.

Section-level error boundary for the 5-layer architecture with retry, named sections, and observability logging.

Promise timeout wrapper. Rejects with TimeoutError if an async operation exceeds the specified duration.

Netflix Hystrix-inspired circuit breaker with CLOSED/OPEN/HALF_OPEN state machine, per-provider configs, and observability.

Retry with exponential backoff, jitter, and configurable retry predicates.

Sequential fallback strategy — try stages in order, return first success. Each stage has independent timeout.

AI safety utilities: input validation, prompt injection detection, and sliding-window rate limiting.

Chaos testing utilities for injecting random errors and latency to test resilience. Disabled by default.

TikTok-style sequential mounting component. FIFO queue ensures one section mounts at a time with memory reclaim.

Monitor JS heap memory pressure via Performance Memory API. Chrome-only with graceful fallback.

Mukoko ecosystem architecture specification — local-first data strategy, cloud infrastructure, open data pipeline, and technology sovereignty assessment.

Standardized sidebar for all Mukoko ecosystem apps. Wraps the sidebar primitive with Mukoko branding, mineral accent strip, section-based navigation, and automatic active state detection. Works across docs, dashboards, settings, and any other context.

Standardized sticky header for all Mukoko ecosystem apps. Includes logo with app name suffix, desktop navigation, theme toggle, and mobile sidebar trigger.

Standardized footer for all Mukoko ecosystem apps. Includes mineral color dots, product links grid, and Nyuchi branding.

Mobile-only bottom navigation bar for Mukoko ecosystem apps. Fixed to bottom with backdrop blur, active state indicator using mineral accent colors, and safe area padding.

Shared detail page layout for articles, events, and listings across the Mukoko ecosystem. Includes hero image, back navigation, metadata row, prose content area, and optional aside column.

Full app shell composing MukokoHeader, MukokoSidebar, and MukokoBottomNav into a responsive dashboard layout with collapsible sidebar and mobile navigation.

Full dashboard layout with stats, chart section, and activity feed.

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.

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.

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.

Area chart — default variant.

Area chart — stacked variant.

Area chart — legend variant.

Area chart — interactive variant.

Area chart — linear variant.

Area chart — step variant.

Area chart — axes variant.

Area chart — gradient variant.

Area chart — icons variant.

Area chart — stacked expand variant.

Bar chart — default variant.

Bar chart — stacked variant.

Bar chart — interactive variant.

Bar chart — label variant.

Bar chart — label custom variant.

Bar chart — mixed variant.

Bar chart — active variant.

Bar chart — multiple variant.

Bar chart — horizontal variant.

Bar chart — negative variant.

Line chart — default variant.

Line chart — interactive variant.

Line chart — linear variant.

Line chart — step variant.

Line chart — label variant.

Line chart — label custom variant.

Line chart — dots variant.

Line chart — dots colors variant.

Line chart — dots custom variant.

Line chart — multiple variant.

Pie chart — simple variant.

Pie chart — stacked variant.

Pie chart — legend variant.

Pie chart — interactive variant.

Pie chart — label variant.

Pie chart — label custom variant.

Pie chart — label list variant.

Pie chart — donut variant.

Pie chart — donut active variant.

Pie chart — donut text variant.

Pie chart — separator none variant.

Radar chart — default variant.

Radar chart — legend variant.

Radar chart — dots variant.

Radar chart — icons variant.

Radar chart — multiple variant.

Radar chart — lines only variant.

Radar chart — label custom variant.

Radar chart — radius 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.

Radial chart — simple variant.

Radial chart — stacked variant.

Radial chart — label variant.

Radial chart — text variant.

Radial chart — grid variant.

Radial chart — shape variant.

Tooltip chart — default variant.

Tooltip chart — icons variant.

Tooltip chart — advanced variant.

Tooltip chart — formatter 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.

Standard profile page with cover image, avatar, stats, tabs, and action buttons.

Standard settings page with sidebar navigation and content sections.

Multi-step onboarding flow with progress indicator, profile setup, and interest selection.

Standard error page for 404, 500, and 503 states with mineral accent.

Standard empty state with icon, title, description, and call-to-action.

Notification center with tabs for all, unread, and mentions with grouped items.

Standard search results page with filters, result items, and pagination.

Spotlight-style command palette with search, grouped results, and keyboard hints.

Chronological action list with timeline pattern for dashboards and profiles.

Complete AI conversation interface with message history, streaming, and suggested prompts.

Dismissible top-of-page banner for announcements with mineral-colored variants.

Text input with async suggestion dropdown, loading states, and keyboard navigation.

Overlapping avatar stack with +N overflow indicator for team displays.

Grid of browsable categories with icons, counts, and mineral-colored accents.

Single message display with sent/received variants, avatar, timestamp, and status.

Message composer with auto-growing textarea, send button, and keyboard shortcuts.

Scrollable conversation list with unread counts and active highlight.

Enhanced code display with language badge, line numbers, copy button, and filename.

GDPR/POPIA-compliant consent banner with accept, decline, and manage options.

Dual-calendar popover for selecting date ranges with preset quick-selects.

API endpoint display with method badge, path, and description.

IntersectionObserver-based scroll sentinel for loading more content.

Collapsible JSON tree view with syntax coloring and type indicators.

Column-based board for organizing items by status with drag indicators.

Directory listing card with image, title, metadata, and badges.

Scrollable filterable log output with severity coloring and auto-scroll.

Themed markdown-to-HTML renderer with design system typography and colors.

Notification feed with read/unread states, timestamps, and date grouping.

Standard page header with breadcrumbs, title, description, and action slot.

Visual password strength meter with requirement checklist.

Phone number input with country code selector, African countries prioritized.

Full-width profile banner with avatar, name, bio, stats, and actions.

Expandable AI prompt input with send/stop buttons and streaming support.

Key-value pair display with labels, values, and optional copy actions.

Section divider with title, description, action, and mineral accent.

Two-column settings page layout with sticky sidebar navigation.

Responsive master-detail layout that collapses on mobile.

Multi-step wizard navigation with horizontal/vertical orientation variants.

Token-based input for multiple values as dismissible badges.

Hierarchical expandable/collapsible node list for nested data.

Compact user profile card with avatar, name, role, and actions.

Virtualized list for large datasets using CSS transforms.

Simple WYSIWYG editor with toolbar for bold, italic, heading, list, and link formatting.

Code input with line numbers, monospace font, and tab key support.

Color selector with hex input and preset swatches including Five African Minerals.

Hour and minute selector with optional AM/PM toggle.

Structured address form with street, city, state, postal code, and country fields with African countries prioritized.

Dual-list selector with search filtering and arrow buttons to move items between panels.

Numeric input with increment and decrement buttons, min/max/step support.

Ecosystem app selector popover with grid of Mukoko app icons.

Mobile slide-up panel with drag handle, backdrop, and slide-up animation.

Full-width flyout navigation with columns of links grouped by section.

Review or testimonial display with star rating, author info, and review text.

Contact information card with avatar, details, and action links for call and email.

Promoted content card with mineral accent border, featured badge, and image.

Chronological event list grouped by date.

Thumbs up/down rating for AI responses with optional text feedback.

Structured AI output card with markdown rendering and action buttons.

Masked/revealable API key with copy and regenerate actions.

Audio playback with progress bar, play/pause, and speed control.

Audit event display with actor, action, target, timestamp.

Single-day time grid with hourly slots and event blocks.

7-column weekly calendar view with hourly time slots.

Shopping cart line item with quantity controls and remove action.

Version update card with categorized changes.

Full chat page layout with sidebar conversations and main chat area.

Interactive checklist with add, reorder, and completion tracking.

Tabbed code display for multiple languages/frameworks.

Threaded comments with nested replies and actions.

Semantic key-value display using dl/dt/dd elements.

Grip indicator for drag-and-drop reordering.

Key-value environment variable editor with secret masking.

Compact event display with mineral-category colored border.

File preview card with icon, name, and size display.

Invoice line item with date, amount, status badge, and download.

Full-screen image viewer with gallery navigation.

Full-page maintenance mode display with estimated return time.

CSS columns-based variable-height grid layout.

Text input with @mention autocomplete for users.

Nested reply thread with indentation and collapse/expand.

MFA enrollment card with QR code and verification step.

Compact note display with title, excerpt, and timestamp.

Step-by-step spotlight overlay guiding users through UI features.

Order total breakdown with line items and total.

Payment method display with card brand and last four digits.

Role/permission indicator badge with color coding.

Formatted price with currency, original price, and discount badge.

Product display with image, title, price, and actions.

Mobile pull-down-to-refresh gesture handler.

Emoji reaction selector popover with counts.

Role picker with descriptions and permission previews.

JSON schema tree display with type badges.

Active session display with device, location, and revoke.

Citation card linking AI responses to source documents.

Position-sticky container for headers or action bars.

Typewriter effect text renderer for streaming LLM output.

Plan comparison card with features, price, and CTA.

Scrollable prompt chips for AI conversations.

Selectable grid of available time slots for booking.

Checkable task item with priority, due date, and assignee.

Animated dots showing someone is typing.

Themed video player wrapper with custom controls.

Webhook endpoint configuration display with status.