Components
Comprehensive collection of localization UI components for React. Browse production-ready language switchers, locale pickers, and RTL layouts.
Language Switchers
Professional language switcher components designed for seamless locale selection across your application.
| Component | Description |
|---|---|
| Language Switcher | Full-featured dropdown with search, flags, and RTL support |
| Language Switcher Pill | Animated pill-style selector with keyboard navigation and RTL support |
Locale Pickers
Choose a region and read back the locale defaults that come with it — for settings pages and onboarding flows.
| Component | Description |
|---|---|
| Locale Picker | Region picker with derived currency, date, number, and week defaults, plus search |
Phone Input
International phone number input with country selector and dial code search.
| Component | Description |
|---|---|
| Phone Input | Country selector with flags, dial codes, and search for 50 countries |
Navigation
Full-featured navigation bar with built-in localization support.
| Component | Description |
|---|---|
| NavBar | Responsive nav with language selector, mobile menu, CTA, and GitHub link |
Translation
Side-by-side translation views for comparing and editing source and target text.
| Component | Description |
|---|---|
| Translation Widget | Editable target pane, RTL-aware layout, and claymorphism styling |
Technical Specifications
Core Features
- Full TypeScript Support - Complete type safety with IntelliSense
- Responsive Design - Mobile-first approach with breakpoint optimization
- Accessibility Compliance - WCAG 2.1 AA standards with screen reader support
- Comprehensive Documentation - Usage examples, API reference, and best practices
Integration & Compatibility
- React 18+ with hooks support
- Next.js 13+ App Router compatibility
- shadcn/ui design system integration
- Tailwind CSS utility-first styling
- npm/pnpm/yarn package manager support
Resources
- Quick Start Guide - Installation and initial setup
- API Reference - Component props and configuration
- Contributing Guide - Development and contribution guidelines
ShadCN CLI Integration
Install Babelize Elements with the shadcn CLI: add the @babelize registry, then pull language switchers, inputs and translation widgets into your project.
Language Switcher
Copy-paste React language switcher with dropdown, search, RTL support and full accessibility. Works with next-intl, react-i18next and any i18n setup.