Localization UI Components for React.
Open-source React components for internationalization (i18n). Build language switchers, locale pickers, and RTL layouts in minutes — MIT licensed, community-driven.
import { LanguageSwitcher } from '@babelize/elements';
export default function App() {
return (
<LanguageSwitcher variant="dropdown=" />
);
}Everything you need to localize.
Built for modern React apps. Install and ship globally.
Language Switchers
Drop-in switchers with dropdowns, pills, flags, and full RTL support.
Locale Pickers
Searchable locale pickers with native names and flags.
RTL Layout Support
Automatic RTL detection and layout direction handling.
i18n Integration
Works with react-intl, next-intl, i18next, LinguiJS, and more.
"use client";
import { LanguageSwitcher } from "@babelize/elements";
export default function App() {
return (
<LanguageSwitcher
locales={[
{ code: "en" },
{ code: "fr" },
{ code: "es" },
{ code: "de" },
{ code: "ja" },
{ code: "ar" },
]}
defaultValue="en"
onValueChange={(code) => {
// next-intl
router.push(`/${code}`);
// react-i18next
i18n.changeLanguage(code);
}}
/>
);
}Join our community
Connect with other developers, get help, and contribute to the project
Frequently asked questions
Everything you need to know about using Babelize Elements in your React projects. Can't find what you're looking for? Check out our GitHub discussions.
Install the full library with `npm install @babelize/elements`, or add individual components with `npx shadcn@latest add @elements/language-switcher` (or `npx @babelize/elements add language-switcher`). Works with Next.js, Remix, and any React app.
Absolutely. Since you own the code, every component is fully customizable with Tailwind CSS classes and props. Change colors, spacing, animations, and behavior however you like. No design constraints.
Every merged component is reviewed by maintainers and follows our accessibility, TypeScript, and localization checklist before it's documented. They're used in production apps worldwide.
Yes — MIT-licensed and free forever. The code lives on GitHub, contributions are welcome, and you can use the components in any project, commercial or not. No attribution required.
Babelize Elements works with every major i18n library: next-intl, react-i18next, react-intl, LinguiJS, FormatJS, and more. The components are library-agnostic — pass your own locale state and callbacks.
Browse the open issues on GitHub, build the component following the contribution guide, and open a pull request. Maintainers review and merge it, and it ships to the docs for everyone.