MPUI-KIT

Currency

Displays an amount of CFA francs with zero decimals and French spacing. Works for XAF (Central Africa) and XOF (West Africa).

Preview

25 000 FCFA

locale

Installation

npx shadcn@latest add @mpui-kit/currency

Requires the @mpui-kit namespace. See Getting started.

Usage

import { Currency } from "@/components/mpui-kit/currency"

// Inside <MpuiKitProvider country={cm}>
<Currency amount={25000} />                  // 25 000 FCFA
<Currency amount={25000} display="code" />   // 25 000 XAF
<Currency amount={25000} locale="en" />      // 25,000 FCFA

// Without a provider, pass the currency (or a country) yourself
<Currency amount={25000} currency="XOF" display="code" />

// Outside components, use the function directly
import { formatFcfa } from "@/lib/mpui-kit/format-fcfa"
formatFcfa(25000) // "25 000 FCFA"

Props

Props
PropTypeDefaultDescription
amount*number—Amount in CFA francs. Rounded to zero decimals. Invalid numbers render “—”.
display"symbol" | "code" | "none""symbol"Show FCFA, the ISO code (XAF or XOF), or the number only.
currency"XAF" | "XOF"country's currencyCFA franc zone. Overrides the country.
countryCountryConfigMpuiKitProvider's countryCountry to take the currency from.
locale"fr" | "en"MpuiKitProvider's locale, then “fr”Digit grouping. French gives 25 000, English gives 25,000.
...propsComponentProps<'span'>—Any other span prop, such as className.

Notes

  • Digits are grouped with a no-break space, so an amount never wraps in the middle of a price. This is the same across browsers, whatever space character Intl emits.
  • CFA francs have no decimals, so fractions are rounded, never shown.
  • The Currency component needs a country or a currency, and throws a clear error if it has neither.