Babelize Elements

Overview

Babelize Elements is an open-source, MIT-licensed collection of localization UI components for React and Tailwind CSS, built by the team behind Babelize. It covers the parts of an app that change with language and region: language switchers, locale pickers, phone input, a localized navbar and a translation widget, all with RTL support.

Components can be installed as the @babelize/elements package or added one at a time with the shadcn CLI, so the source lives in the project. They are library-agnostic: each takes locale state and callbacks, and the docs show usage with next-intl, react-i18next, react-intl and LinguiJS. The registry currently serves 11 items, including shared locale data, types and hooks.

Features

• Language switchers: A dropdown switcher with search and an animated pill variant, both keyboard navigable and RTL aware.
• Locale picker: A region picker that derives defaults for currency, date and number formats and first day of week.
• Phone input: International phone input with a country selector, flags and dial code search for 50 countries.
• Localized navbar: A responsive navbar with a built-in language selector, mobile menu and CTA button.
• Translation widget: A side-by-side view with editable target text, swap, copy and character count.
• Shared utilities: Locale data lookups, a Locale type, a controllable-state hook and listbox keyboard navigation.
• Review process: Merged components are checked against an accessibility, TypeScript and localization checklist.

Tech stack

• React, TypeScript, Tailwind CSS
• Motion, lucide-react
• Works with Next.js, Remix and other React apps

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @babelize/component-name