Babelize Elements

Open-source Localization UI components for React and Tailwind CSS.
Ready-to-use components for language switchers, locale pickers, translation widgets, and more — built by the community.

elements.babelize.co · Issues · Contributing

What is Babelize Elements?

Babelize Elements is a community-built library of Localization UI components for React and Tailwind CSS. Every localized app needs a language switcher, a locale picker, RTL-aware layouts, and pluralization UI — Elements turns that repetitive work into a shared, open-source toolbox.

• Easy to install — npm install @babelize/elements for the full library, or add components one at a time with npx shadcn@latest add @elements/<component>.
• No framework lock-in — plain React and Tailwind. No Next.js, no router, no theme provider required.
• Localization-first — pluralization, RTL, and locale data built into every component.
• Accessible — keyboard support, ARIA labels, and WCAG-aware markup.
• Open source — MIT-licensed, free forever, built by contributors like you.

Installation

Full library

npm install @babelize/elements

Tailwind does not scan node_modules, so point it at the package once — otherwise the components render unstyled:

/* Tailwind v4 — in the CSS file that imports Tailwind */
@import "tailwindcss";
@source "../node_modules/@babelize/elements/dist";

// Tailwind v3 — in tailwind.config.js
content: ["./src/**/*.{ts,tsx}", "./node_modules/@babelize/elements/dist/**/*.js"],

Components installed with the CLI below live in your own source tree, so they need no extra Tailwind config.

Individual components

Install a component with the shadcn CLI (register the registry once):

npx shadcn@latest registry add @elements=https://elements.babelize.co/r/{name}.json
npx shadcn@latest add @elements/language-switcher

Or with the CLI bundled in @babelize/elements:

npx @babelize/elements add language-switcher

Usage

Every component works uncontrolled (pass defaultValue) or controlled (pass value and onValueChange).

import { LanguageSwitcher, PhoneInput, NavBar } from "@babelize/elements";

The components are client components, and the package declares "use client" for you — importing them from a React Server Component works without any extra wrapper. The cn helper is also available from @babelize/elements/utils, which carries no directive and so can be called from server code.

LanguageSwitcher

<LanguageSwitcher
  locales={[{ code: "en" }, { code: "fr" }, { code: "ar" }]}
  defaultValue="en"
  showFlags
  onValueChange={(code) => router.push(`/${code}`)}
/>

Prop	Type	Default	Description
locales	Locale[]	—	Available locales. Only code is required; labels, flags, and RTL are auto-detected.
value	string	—	Selected locale code. Pass this to control the component.
defaultValue	string	first locale	Initial locale code when uncontrolled.
onValueChange	(code: string) => void	—	Fired once per selection.
showFlags	boolean	false	Show flag emojis beside locale names.
label	"native" | "english"	"english"	Render locale names natively or in English.

PhoneInput

<PhoneInput
  defaultCountry="IN"
  name="phone"
  onValueChange={(phone, country) => console.log(country.dialCode + phone)}
/>

Prop	Type	Default	Description
value	string	—	Phone number. Pass this to control the component.
defaultValue	string	""	Initial number when uncontrolled.
onValueChange	(phone: string, country: Country) => void	—	Fired on typing and on country change.
defaultCountry	string	"US"	ISO 3166-1 alpha-2 code of the initial country.
showFlags	boolean	true	Show the flag emoji beside the dial code.

The ref points at the underlying <input>, and name, required, and other input attributes pass straight through — so it works in a plain HTML form.

NavBar

NavBar renders plain <a> elements by default. Pass linkComponent to get client-side navigation from your router:

import Link from "next/link";

<NavBar
  logo={<Logo />}
  links={[{ label: "Docs", href: "/docs" }]}
  locales={[{ code: "en" }, { code: "fr" }]}
  value={locale}
  onValueChange={setLocale}
  linkComponent={Link}
  cta={{ label: "Get started", href: "/docs" }}
/>;

Full props for every component are documented at elements.babelize.co.

Documentation

Full documentation, guides, and live component demos live at elements.babelize.co, built with Next.js and Fumadocs from this same repo.

Local development

bun install
bun run dev          # docs site at http://localhost:3000

bun run test         # component tests
bun run typecheck
bun run lint
bun run build:lib    # build the publishable library into dist/
bun run test:pack    # install the packed tarball into a scratch project

Contributing a component

Components are contributed by the community. The typical flow:

1. Read ARCHITECTURE.md for the codebase layout and component conventions.
2. Pick an open issue — look for good first issue or help wanted.
3. Build the component in src/registry/components/.
4. Open a pull request following our contributing guide.
5. Maintainers review it, and merged components ship to the docs for everyone.

Great component candidates:

• Language switchers (dropdowns, pills, searchable)
• Locale pickers (regions, currencies, date formats)
• Translation widgets and inline editors
• RTL-aware layout primitives
• Locale-aware date/time pickers
• Pluralization helpers and CLDR plural-rule UI
• Locale-aware currency inputs

Community

• Architecture
• Code of Conduct
• Security Policy
• Contributing

Contributors

Babelize Elements is built by an amazing community of designers, developers, and translators. A huge thank-you to everyone who contributes code, reviews, docs, or ideas.

Star History

License

MIT © Babelize