intl-ui — International UI components for React & Angular

Three packages, one ecosystem

Use the framework wrapper that matches your stack, or consume the core directly from Node, Deno, Bun, or any browser.

</>

@intl-ui/core

Framework-agnostic

Country data, phone parsing, formatting, validation, and a dial-code trie. Zero runtime dependencies — runs anywhere.

npm install @intl-ui/core

View on npm →

⚙

@intl-ui/react

React 18 & 19

Headless usePhoneInput() hook, compound components with asChild, and a one-liner <PhoneInput />.

npm install @intl-ui/react

Live demo → npm

▲

@intl-ui/angular

Angular 17+

Signal-based store, standalone component, ControlValueAccessor, and form validators.

npm install @intl-ui/angular

Live demo → npm

Examples

The same behavior, expressed three ways.

⚙

React — one-liner

import { PhoneInput } from '@intl-ui/react';

function App() {
  return (
    <PhoneInput
      defaultCountry="co"
      onValueChange={(value, meta) => {
        console.log(value);         // "+573105551234"
        console.log(meta.isValid);  // true
        console.log(meta.country); // { name: "Colombia", ... }
      }}
    />
  );
}

▲

Angular — standalone component

import { Component, signal } from '@angular/core';
import { IntlPhoneInputComponent } from '@intl-ui/angular';

@Component({
  standalone: true,
  imports: [IntlPhoneInputComponent],
  template: `
    <intl-phone-input [defaultCountry]="'co'" [(value)]="phone" />
    <p>E.164: {{ phone() }}</p>
  `,
})
export class AppComponent {
  phone = signal('');
}

</>

Core — no UI framework

import { parsePhone, validatePhone, getCountryByIso2 } from '@intl-ui/core';

const parsed = parsePhone('+573105551234');
// {
//   e164: "+573105551234",
//   national: "310 555 1234",
//   international: "+57 310 555 1234",
//   country: { name: "Colombia", iso2: "co", dialCode: "57", ... },
//   isValid: true
// }

const country = getCountryByIso2('co');
const result = validatePhone('+573105551234', country);