Nyuchi
Design · Components
The building blocks, made visible.
Every component below renders with the live design tokens. This is the system working, not a set of screenshots — the same primitives every Bundu-ecosystem product is assembled from.
Actions
Buttons
Four variants, all pill-shaped, all meeting the comfortable touch-target height.
Status
Badges
Each badge maps to a mineral container pair. Status meaning is carried by semantic tokens, never by raw colour.
Containers
Cards
The card surface — static and interactive variants.
Static card
A plain surface — border, card background, rounded corners.
Interactive card
Adds a soft shadow on hover for clickable surfaces.
Forms
Inputs
Pill-shaped, full-width, with a visible focus ring. Demo only — fields below are disabled.
Mandates
Accessibility is built into every primitive.
-
Buttons, inputs, badges, and avatars are pill-shaped by mandate.
-
Touch targets default to 56 pixels; 48 is the absolute floor.
-
Every component carries data-slot and data-portal attributes.
-
Directional icons mark data-rtl-mirror so layouts flip cleanly for RTL.
-
Semantic-colour pairs are re-validated daily against four colour-blindness simulations.
The registry
A registry, not a snapshot.
The components above are the marketing-site implementation. The full system is published as a shadcn-compatible registry — the design portal renders it straight from the database.
-
Stored in the registry
Production source for every stable component lives in the registry database. The design portal renders it directly, so docs and demos can never drift from the shipped code.
-
shadcn-compatible
The registry follows the shadcn convention, so a component installs into any project set up the shadcn way — you copy the source in and own it, no opaque dependency.
-
Composed in layers
Unbranded primitives sit at the base; branded components compose them and add the runtime harness. Pages only assemble — never re-implement — branded components.
In this repository the shared primitives are being extracted into
the @bundu-labs/ui package, so a
fix lands across Nyuchi, Mukoko, and Bundu at once.
How does it all hold together?
Components are layers in a larger structure. See the architecture — and Mzizi, the framework underneath it.