MPUI-KIT

Open source · shadcn/ui registry · Pre-release (0.1.0 in development)

shadcn/ui components for mobile payments

Mobile Money checkout, FCFA currency, local phone numbers with operator detection, and bilingual FR/EN forms. Copy-paste components that work on slow connections and low-end phones. Cameroon first, and other countries are a pull request away.

Get startedTry the demoRead the docs

Try it: book an apartment

A fake booking priced per night in FCFA, paid with the real checkout block. The payment goes to a fake backend that waits a few seconds, like a customer approving on their phone. No real payment is made and nothing leaves your browser.

Loading the demo…

What is in it

  • Mobile Money checkout

    A tested flow: waiting for approval, success, failure, timeout and retry, with a receipt. You give it two async functions, so it works with any provider or aggregator.

  • FCFA done right

    XAF and XOF with no decimals and French spacing (25 000 FCFA), or English grouping (25,000 FCFA). Show FCFA or the ISO code.

  • Local phone numbers

    Detects the operator from the prefix as you type, validates the length and returns E.164. Works with react-hook-form and zod.

  • French and English

    Every string lives in a small FR/EN dictionary, and you can override any of it. The demo above switches language live.

  • Accessible by default

    Labelled fields, keyboard navigation, live regions for payment states, focus that moves where you need it, and reduced motion respected.

  • Light on slow connections

    No animation library, no syntax highlighter, server-rendered docs. The demo above only downloads when you scroll to it.

Your country is a pull request away

No component hard-codes Cameroon. Operators, prefixes, currency, languages and regions live in one data file per country, and a test checks it for overlapping prefixes and other mistakes. Copy cm.ts, fill in your country, and open a pull request.
// registry/mpui-kit/lib/countries/<iso>.ts
export const xx: CountryConfig = {
  iso: "XX",
  callingCode: "000",
  nationalNumberLength: 9,
  currency: "XOF",
  operators: [
    { id: "op1", name: "Operator", color: "#0ea5e9", prefixes: prefixRange("70", "72") },
  ],
  // ...groupSizes, locales, regions
}

The Cameroon prefixes were verified against the ART numbering plan, but treat operator detection as a hint, not proof. The phone input docs explain what that means.

Install

You need Tailwind CSS v4, shadcn/ui and React 19. The components are copied into your project, so you own the code.
npx shadcn@latest registry add @mpui-kit=https://mpui-kit.vercel.app/r/{name}.json
npx shadcn@latest add @mpui-kit/country-cm @mpui-kit/momo-checkout
Full getting started guide