nyuchimziziMzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Seven African Minerals palette.
Built by Nyuchi Africav4.1.8
Playground
Doctrine
Releases
Documentation
v4.1.8
nyuchimzizinyuchimziziMzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Seven African Minerals palette.
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>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.
A date field component that allows users to enter and edit dates.
Displays a card with header, content, and footer.
A carousel with motion and swipe built using Embla.
Beautiful charts built using Recharts. Copy and paste into your apps.
Area chart — axes variant.
Area chart — default variant.
Area chart — gradient variant.
Area chart — icons variant.
Area chart — interactive variant.
Area chart — legend variant.
Area chart — linear variant.
Area chart — stacked variant.
Area chart — stacked expand variant.
Area chart — step variant.
Bar chart — active variant.
Bar chart — default variant.
Bar chart — horizontal variant.
Bar chart — interactive variant.
Bar chart — label variant.
Bar chart — label custom variant.
Bar chart — mixed variant.
Bar chart — multiple variant.
Bar chart — negative variant.
Bar chart — stacked variant.
Line chart — default variant.
Line chart — dots variant.
Line chart — dots colors variant.
Line chart — dots custom variant.
Line chart — interactive variant.
Line chart — label variant.
Line chart — label custom variant.
Line chart — linear variant.
Line chart — multiple variant.
Line chart — step variant.
Pie chart — donut variant.
Pie chart — donut active variant.
Pie chart — donut text variant.
Pie chart — interactive variant.
Pie chart — label variant.
Pie chart — label custom variant.
Pie chart — label list variant.
Pie chart — legend variant.
Pie chart — separator none variant.
Pie chart — simple variant.
Pie chart — stacked variant.
Radar chart — default variant.
Radar chart — dots variant.
Radar chart — grid circle variant.
Radar chart — grid circle fill variant.
Radar chart — grid circle no lines variant.
Radar chart — grid custom variant.
Radar chart — grid fill variant.
Radar chart — grid none variant.
Radar chart — icons variant.
Radar chart — label custom variant.
Radar chart — legend variant.
Radar chart — lines only variant.
Radar chart — multiple variant.
Radar chart — radius variant.
Radial chart — grid variant.
Radial chart — label variant.
Radial chart — shape variant.
Radial chart — simple variant.
Radial chart — stacked variant.
Radial chart — text variant.
Tooltip chart — advanced variant.
Tooltip chart — default variant.
Tooltip chart — formatter variant.
Tooltip chart — icons variant.
Tooltip chart — indicator line variant.
Tooltip chart — indicator none variant.
Tooltip chart — label custom variant.
Tooltip chart — label formatter variant.
Tooltip chart — label none variant.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands and collapses a panel.
Fast, composable, unstyled command menu for React.
Displays a menu to the user triggered by a right click.
Governance proposal card with title, description, proposer, voting progress bar (for/against/abstain), deadline countdown, quorum status, and vote action. Maps to ubuntu.dao_proposals table. Used in the governance section of the Mukoko Foundation interface.
Full dashboard layout with stats, chart section, and activity feed.
A window overlaid on the primary window, rendering content underneath inert.
A drawer component for React built on top of Vaul.
Displays a menu to the user triggered by a button.
Building forms with React Hook Form and Zod.
For sighted users to preview content available behind a link.
Displays a form input field.
Accessible one-time password component with copy paste functionality.
Renders an accessible label associated with controls.
A visually persistent menu common in desktop applications.
A collection of links for navigating websites.
NFT display card showing media (image/video), title, collection, owner, and marketplace actions. Used for Nhimbe ERC-1155 tickets, Novels chapter NFTs, Ubuntu badge NFTs, and creator content NFTs. Maps to wallet.nft_holdings.
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.
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.
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 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.
Crypto token display row with symbol, balance, and optional fiat value. Extracted from wallet-page.
A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
Full payment receipt with QR code, transaction ID, amount, parties, timestamp, and shareable format. Maps to wallet.transaction table. Used after successful payments, transfers, and purchases across Wallet, BushTrade, and Nhimbe.
A hook to detect if the current device is mobile.
A hook for managing toast notifications.
Utility functions including the cn classname helper.
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.