dirham

The UAE Dirham currency symbol (⃃) as a web font, CSS utility, React component, and Web Component for Vue, Angular, Svelte & vanilla JS.

Built on U+20C3, the codepoint assigned to the UAE Dirham Sign in Unicode 18.0. Because the package renders the symbol through a custom web font today, it will continue working without any code changes when operating systems ship native Unicode 18.0 support in September 2026.

Live Demo  ·  GitHub  ·  npm

Installation

npm install dirham
# or
pnpm add dirham
# or
yarn add dirham

Usage

React — SVG component

Renders an inline SVG. No font loading required; works with SSR and React Server Components.

import { DirhamSymbol } from "dirham/react";

function Price() {
	return (
		<span>
			100 <DirhamSymbol size={16} />
		</span>
	);
}

Weight variants match the symbol stroke to surrounding text weight:

thin extralight light regular medium semibold bold extrabold black

<DirhamSymbol size="1em" weight="bold" />

CSS / Web Font

import "dirham/css";

<i class="dirham-symbol" aria-label="UAE Dirham"></i>

SCSS

@use "dirham/scss";

JavaScript utilities

import { formatDirham, parseDirham, DIRHAM_UNICODE } from "dirham";

formatDirham(1234.5); // "\u20C3 1,234.50"
formatDirham(1234.5, { locale: "ar-AE" }); // "١٬٢٣٤٫٥٠ \u20C3"
formatDirham(100, { useCode: true }); // "AED 100.00"
formatDirham(1500000, { notation: "compact" }); // "\u20C3 1.5M"
parseDirham("\u20C3 1,234.50"); // 1234.5

React — Price component

Combines formatting + symbol into a single component. Accepts className for custom styling:

import { DirhamPrice } from "dirham/react";

<DirhamPrice amount={1250} />
<DirhamPrice amount={1500000} notation="compact" weight="bold" />
<DirhamPrice amount={100} useCode />
<DirhamPrice amount={750} className="text-emerald-400 text-2xl" />

React — Animated price

Count-up / count-down transitions using requestAnimationFrame. No external deps.

import { AnimatedDirhamPrice } from "dirham/react";

<AnimatedDirhamPrice amount={1250} />
<AnimatedDirhamPrice amount={5000} duration={800} easing="easeInOut" />
<AnimatedDirhamPrice amount={99.9} useCode notation="compact" />

| Prop | Default | Description | | ---------- | ------------ | -------------------------------------------- | | amount | — | Target value to animate to | | duration | 600 | Animation duration in ms | | easing | "easeOut" | linear · easeIn · easeOut · easeInOut | | locale | "en-AE" | Intl locale | | decimals | 2 | Decimal places | | useCode | false | Show AED instead of symbol | | notation | "standard" | "standard" or "compact" | | weight | "regular" | Symbol weight |

React — Currency input

Masked currency input with auto-formatting, paste handling, and Arabic numeral support:

import { DirhamInput } from "dirham/react";

<DirhamInput defaultValue={100} onChange={(v) => console.log(v)} />
<DirhamInput value={amount} onChange={setAmount} min={0} max={999999} />
<DirhamInput locale="ar-AE" useCode />

| Prop | Default | Description | | ---------------- | ----------- | ------------------------------------ | | value | — | Controlled numeric value | | defaultValue | — | Uncontrolled initial value | | onChange | — | (value: number \| null) => void | | locale | "en-AE" | Intl locale | | decimals | 2 | Maximum decimal places | | min / max | — | Clamps value on blur | | showSymbol | true | Show inline SVG symbol | | useCode | false | Show AED text instead of symbol | | selectOnFocus | true | Select all text on focus |

React — Exchange rate hook

Fetch live exchange rates and convert AED amounts:

import { useDirhamRate } from "dirham/react";

function PriceInUSD({ amount }: { amount: number }) {
  const { rate, convert, loading, error } = useDirhamRate("USD");

  if (loading) return <span>Loading…</span>;
  if (error) return <span>Error: {error}</span>;

  return <span>${convert(amount)} USD (rate: {rate})</span>;
}

Web Component

Framework-agnostic — works in Vue, Angular, Svelte, or vanilla HTML:

<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/dirham/dist/web-component/index.js"
></script>

<!-- Symbol only -->
<dirham-symbol size="24" weight="bold"></dirham-symbol>

<!-- Formatted price -->
<dirham-price amount="1250"></dirham-price>
<dirham-price amount="5000000" notation="compact"></dirham-price>
<dirham-price amount="100" locale="ar-AE"></dirham-price>
<dirham-price amount="500" use-code></dirham-price>

Or import in a bundler:

import "dirham/web-component";

<dirham-price> Attributes

| Attribute | Default | Description | | ------------- | ------------ | ----------------------------------------- | | amount | 0 | Numeric value to display | | locale | "en-AE" | Intl locale string (e.g. ar-AE) | | decimals | 2 | Number of decimal places | | notation | "standard" | "standard" or "compact" | | use-code | — | Boolean attr — show AED instead of symbol | | symbol-size | "1em" | SVG symbol width/height | | weight | "regular" | thin · light · regular · bold … | | currency | "AED" | Currency code when use-code is set |

<dirham-animated-price>

Animated count-up/count-down price display:

<dirham-animated-price amount="1250" duration="600" easing="easeOut"></dirham-animated-price>

Attributes: amount, duration, easing, locale, decimals, notation, use-code, symbol-size, weight

<dirham-input>

Masked currency input with auto-formatting:

<dirham-input value="100" min="0" max="999999" decimals="2"></dirham-input>
<dirham-input locale="ar-AE" placeholder="المبلغ"></dirham-input>

Attributes: value, locale, decimals, min, max, placeholder, disabled, readonly, show-symbol, use-code, symbol-size, weight

Fires dirham-change event with { detail: { value: number | null } }.

Vue

<script setup>
import "dirham/web-component";
</script>

<template>
	<dirham-symbol size="24" weight="bold" />
	<dirham-price amount="1250" />
	<dirham-price amount="5000000" notation="compact" />
</template>

Angular

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "dirham/web-component";

@Component({
	schemas: [CUSTOM_ELEMENTS_SCHEMA],
	template: `
		<dirham-symbol size="24" weight="bold"></dirham-symbol>
		<dirham-price amount="1250"></dirham-price>
	`,
})
export class AppComponent {}

Svelte

<script>
  import "dirham/web-component";
</script>

<dirham-symbol size="24" weight="bold"></dirham-symbol>
<dirham-price amount="1250"></dirham-price>

CDN (no bundler)

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/dirham/dist/css/dirham.css"
/>
<i class="dirham-symbol" aria-label="UAE Dirham"></i>

Clipboard utility

import { copyDirhamSymbol } from "dirham";

await copyDirhamSymbol(); // copies \u20C3 to clipboard
await copyDirhamSymbol("html"); // copies ⃃
await copyDirhamSymbol("css"); // copies \20C3

Copy formatted amount

import { copyDirhamAmount } from "dirham";

await copyDirhamAmount(1234.5);                    // copies "د.إ 1,234.50"
await copyDirhamAmount(1234.5, { useCode: true }); // copies "AED 1,234.50"
await copyDirhamAmount(500, { locale: "ar-AE" });  // copies "٥٠٠٫٠٠ د.إ"

VAT helpers

UAE VAT (5%) calculation utilities with configurable rate and precision:

import { addVAT, removeVAT, getVAT, UAE_VAT_RATE } from "dirham";

addVAT(100);                        // 105
removeVAT(105);                     // 100
getVAT(100);                        // 5

addVAT(100, { rate: 0.1 });         // 110 (custom 10% rate)
addVAT(99.99, { decimals: 4 });     // 104.9895

Currency conversion

Convert amounts between AED and other currencies. Rates are fetched from a free exchange rate API and cached for 1 hour:

import { convertFromAED, convertToAED, fetchExchangeRates } from "dirham";

const usd = await convertFromAED(100, "USD");           // e.g. 27.23
const aed = await convertToAED(27.23, "USD");            // e.g. 100
const manual = await convertFromAED(100, "USD", { rate: 0.2723 }); // skip fetch

const rates = await fetchExchangeRates(); // { USD: 0.2723, EUR: 0.2511, ... }

React Native

Requires react-native-svg as a peer dependency:

import { DirhamSymbol, DirhamPrice } from "dirham/react-native";

<DirhamSymbol size={24} color="#000" weight="bold" />
<DirhamPrice amount={1250} />
<DirhamPrice amount={500} locale="ar-AE" useCode />

Tailwind CSS plugin

Add the Dirham symbol plugin to your Tailwind config:

// tailwind.config.js
import dirhamPlugin from "dirham/tailwind";

export default {
  plugins: [dirhamPlugin],
};

Available utility classes:

| Class | Description | | ------------------ | ----------------------------------------------- | | .dirham | Base — sets font-family to Dirham | | .dirham-thin | Thin weight | | .dirham-light | Light weight | | .dirham-regular | Regular weight (default) | | .dirham-bold | Bold weight | | .dirham-black | Black weight | | .dirham-xs | Extra small size (0.75rem) | | .dirham-sm | Small size (0.875rem) | | .dirham-base | Base size (1rem) | | .dirham-lg | Large size (1.25rem) | | .dirham-xl | Extra large size (1.5rem) | | .dirham-2xl | 2× large size (2rem) | | .dirham-3xl | 3× large size (2.5rem) | | .dirham-4xl | 4× large size (3rem) | | .dirham-before | Pseudo-element ::before with \20C3 content | | .dirham-after | Pseudo-element ::after with \20C3 content | | .dirham-price | Component class (nowrap + tabular-nums) |

Next.js font optimization

Pre-configured next/font/local instance with the Dirham WOFF2 font:

import { dirhamFont } from "dirham/next";

// In your layout:
<html className={dirhamFont.className}>
  {children}
</html>

// Or use the CSS variable:
<div style={{ fontFamily: "var(--font-dirham)" }}>
  &#x20C3;
</div>

For manual configuration, use the raw config:

import { dirhamFontConfig } from "dirham/next";
import localFont from "next/font/local";

const myDirham = localFont(dirhamFontConfig);

CLI

npx dirham              # Print symbol info
npx dirham copy         # Copy \u20C3 to clipboard
npx dirham copy html    # Copy HTML entity

OG / Social Media Price Cards

Generate shareable price card images for Open Graph and Twitter Cards.

Server-side SVG (zero dependencies)

import { generatePriceCardSVG } from "dirham/og";

const svg = generatePriceCardSVG({
  amount: 12500,
  title: "Monthly Rent",
  subtitle: "Dubai Marina, Studio",
  accentColor: "#22c55e",
});
// Returns a self-contained <svg> string (1200×630 by default)

Next.js OG Image Route (@vercel/og)

// app/api/og/route.tsx
import { ImageResponse } from "next/og";
import { DirhamPriceCard } from "dirham/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const amount = Number(searchParams.get("amount") ?? "0");
  const title = searchParams.get("title") ?? undefined;

  return new ImageResponse(
    <DirhamPriceCard amount={amount} title={title} />,
    { width: 1200, height: 630 },
  );
}

Then in your page <head>:

<meta property="og:image" content="/api/og?amount=12500&title=Monthly+Rent" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | amount | number | — | Price amount (required) | | title | string | — | Header text above the price | | subtitle | string | — | Footer text below the price | | locale | string | "en-AE" | Intl locale (RTL auto-detected) | | decimals | number | 2 | Decimal places | | notation | "standard" \| "compact" | "standard" | Number notation | | width | number | 1200 | Image width in px | | height | number | 630 | Image height in px | | background | string | "#0a0a0a" | Background color | | textColor | string | "#ffffff" | Text color | | accentColor | string | "#22c55e" | Dirham symbol & badge color |

Exports

| Import path | Description | | -------------------------- | ------------------------------------------------------------------------------------ | | dirham | Core utilities, constants, clipboard, VAT, conversion | | dirham/react | DirhamSymbol, DirhamIcon, DirhamPrice, AnimatedDirhamPrice, DirhamInput, useDirhamRate | | dirham/react-native | DirhamSymbol, DirhamPrice (requires react-native-svg) | | dirham/web-component | <dirham-symbol>, <dirham-price>, <dirham-animated-price>, <dirham-input> | | dirham/tailwind | Tailwind CSS plugin with Dirham utility classes | | dirham/next | Next.js next/font/local wrapper (dirhamFont, dirhamFontConfig) | | dirham/og | OG image generation (DirhamPriceCard, generatePriceCardSVG) | | dirham/css | CSS with @font-face | | dirham/scss | SCSS with @font-face | | dirham/font/woff2 | WOFF2 font file (default) | | dirham/font/woff | WOFF font file | | dirham/font/ttf | TTF font file | | dirham/font/sans/woff2 | Sans-serif variant WOFF2 | | dirham/font/serif/woff2 | Serif variant WOFF2 | | dirham/font/mono/woff2 | Monospace variant WOFF2 | | dirham/font/arabic/woff2 | Arabic variant WOFF2 |

Unicode

U+20C3 (UAE DIRHAM SIGN) was accepted by the Unicode Technical Committee on 2025-Jul-22 and is scheduled for Unicode 18.0 (September 2026). This package already uses that codepoint, so when system fonts gain native support the custom web font simply becomes unused — no API or template changes needed.

License

MIT. The Dirham symbol glyph is sourced from the Central Bank of UAE.