---
name: "@babelize"
slug: "babelize"
description: "Open-source localization components for shadcn/ui: language switchers, locale-aware number and relative-time formatters, phone input, localized navbar, and a translation widget."
category: "Forms"
tags: ["buttons", "cards", "forms", "hooks", "navigation"]
framework: "react"
license: "MIT"
author: "babelize"
website: "https://elements.babelize.co"
github: "https://github.com/babelize/babelize-elements"
registry: "https://elements.babelize.co/r/registry.json"
pro: false
pro_url: null
github_stars: 44
component_count: 10
generated_at: "2026-10-20T06:35:22.791Z"
---

# @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.

## Links

- Website: https://elements.babelize.co
- GitHub: https://github.com/babelize/babelize-elements
- Registry JSON: https://elements.babelize.co/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/babelize
- This file: https://sh4dcn.vercel.app/md/babelize.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://elements.babelize.co/r/registry.json
pnpm dlx shadcn@latest add https://elements.babelize.co/r/registry.json
bunx shadcn@latest add https://elements.babelize.co/r/registry.json
# clone the source repo
git clone https://github.com/babelize/babelize-elements.git
# fetch the raw registry index
curl -s https://elements.babelize.co/r/registry.json
```

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| language-switcher | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | The shared `Locale` interface used by every locale-aware component. | `npx shadcn@latest add https://elements.babelize.co/r/locale-types.json` |
| use-controllable-state | registry:lib | Hook backing the `value` / `defaultValue` / `onValueChange` trio on every component. | `npx shadcn@latest add https://elements.babelize.co/r/use-controllable-state.json` |
| use-listbox-navigation | registry: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` |
| utils | registry:lib | The `cn` helper used across Babelize Elements components. | `npx shadcn@latest add https://elements.babelize.co/r/utils.json` |

## For AI agents

```text
You are adding components from @babelize to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/babelize.md) for the component list.
2. Fetch the machine-readable index: https://elements.babelize.co/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: babelize).
```