Skip to content
Request a free call
All case studies
Open sourcePayments UIUAE and Saudi Arabia

Dirham and Riyal libraries, 65,000+ npm downloads

Two open-source libraries draw the new UAE Dirham and Saudi Riyal signs in apps, whatever fonts a device has.

AI Transformation Lead

The npm registry counts every download, including build servers, mirrors and bots, so these totals are not a count of people.

Outcomes

dirham downloads, Feb to Sep 2026
61,673
riyal downloads, Apr to Sep 2026
3,950
dirham monthly downloads, Mar to Aug 2026
4,057 to 15,405

The problem

The Saudi and UAE central banks each released a new currency sign in 2025. Unicode, the standard that numbers every character, placed the Riyal at U+20C1 in version 17.0 and the Dirham at U+20C3 in version 18.0. Fonts lag behind each Unicode release, so neither sign rendered reliably when I built these packages in 2026. A price typed with the new sign could show an empty box instead.

Constraints

  • Stay correct once system fonts catch up
  • Show the sign before any font loads
  • Fit any front end, even plain HTML

What I built

  1. I built both packages on the official Unicode numbers, not a made-up slot that only one font understands. Once system fonts draw the signs, an app can drop the web font and keep its formatted prices and SVG components unchanged.
  2. Each package also draws the sign as an SVG image that renders on the server with no font download. The dirham SVG offers six stroke weights, from regular to black, to match the text beside it.
  3. Both packages ship React and React Native components, plus Web Components for any framework or plain HTML. The riyal package adds native Vue 3 and Svelte 5 components.
  4. VAT helpers add or strip tax, at the UAE's 5% or Saudi Arabia's 15% by default. The riyal package also totals a cart, with discounts and shipping.
  5. Both packages also ship a Tailwind plugin, a Next.js font helper and a command-line tool that copies the sign.
  6. Each repository holds the package and its demo site. Each package carries 10 test files and a changelog.

Languages

  • TypeScript

Stack

  • TypeScript
  • React and React Native
  • Web Components
  • Vue 3 and Svelte 5
  • Tailwind CSS plugin
  • Next.js next/font
  • Turborepo and Changesets
  • Vitest

Code and links

More case studies