@babelize

Open-source localization components for shadcn/ui: language switchers, locale-aware number and relative-time formatters, phone input, localized navbar, and a translation widget.

11 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://elements.babelize.co/r/registry.json

pnpm pnpm dlx shadcn@latest add https://elements.babelize.co/r/registry.json

bun bunx shadcn@latest add https://elements.babelize.co/r/registry.json

fetch registry curl -s https://elements.babelize.co/r/registry.json

Components

11 total

Language Switcher ui

Copy-paste language switcher component for React with dropdown, search, RTL support, and full accessibility.

npx shadcn@latest add https://elements.babelize.co/r/language-switcher.json

Language Switcher Pill ui

Animated pill-style language switcher with keyboard navigation and RTL support.

npx shadcn@latest add https://elements.babelize.co/r/language-switcher-pill.json

Phone Input ui

International phone number input with country selector, flag emojis, and dial code search for 50 countries.

npx shadcn@latest add https://elements.babelize.co/r/phone-input.json

NavBar ui

Responsive navigation bar with built-in language selector, mobile menu, CTA button, and GitHub link.

npx shadcn@latest add https://elements.babelize.co/r/navbar.json

Translation Widget ui

Side-by-side translation view with editable target, swap, copy, character count, and RTL-aware layout.

npx shadcn@latest add https://elements.babelize.co/r/translation-widget.json

Locale Data ui

Shared flag, language-name and RTL lookups for locale-aware components.

npx shadcn@latest add https://elements.babelize.co/r/locale-data.json

Locale Types ui

The shared `Locale` interface used by every locale-aware component.

npx shadcn@latest add https://elements.babelize.co/r/locale-types.json

useControllableState lib

Hook backing the `value` / `defaultValue` / `onValueChange` trio on every component.

npx shadcn@latest add https://elements.babelize.co/r/use-controllable-state.json

useListboxNavigation lib

Keyboard navigation for listbox popups: arrow keys, Home / End, Enter, Escape, and focus management.

npx shadcn@latest add https://elements.babelize.co/r/use-listbox-navigation.json

Utilities lib

The `cn` helper used across Babelize Elements components.

npx shadcn@latest add https://elements.babelize.co/r/utils.json

Locale Picker ui

Region picker with locale-derived defaults: currency, date and number formats, and first day of week.

npx shadcn@latest add https://elements.babelize.co/r/locale-picker.json