# Babelize Elements

Babelize Elements is an open-source library of copy-paste Localization UI components for React and Tailwind CSS.

It is the community home for the building blocks every localized app needs — language switchers, locale pickers, translation widgets, RTL-aware layouts, and more. Built by the Babelize community, for the Babelize community.

## Why Elements?

Building a localized app means repeating the same UI work in every project: a language dropdown here, a locale-aware date there, an RTL-safe nav everywhere. Elements turns that work into a shared, open-source toolbox.

- **Copy & paste** — grab the code, drop it in your project, done. No installs, no lock-in.
- **Localization-first** — every component ships with pluralization, RTL, and locale-data support built in.
- **Accessible** — keyboard support, ARIA labels, and WCAG-aware markup out of the box.
- **Open source** — MIT-licensed, free forever, and built by contributors like you.

## Getting Started

Babelize Elements is designed to drop into any React + Tailwind CSS project with zero configuration. Because components are copy-paste, you control the code — no registry lock-in, no runtime dependencies.

### Prerequisites

- A React project (Next.js, Vite, Remix, or any React bundler)
- Tailwind CSS v4 installed and configured
- Node.js 18+

### Installation

There is nothing to install. Browse the component you need in the docs or the repository, copy the source file into `components/elements/`, and import it:

```bash
# components live in your own project
mkdir -p components/elements
cp path/to/language-switcher.tsx components/elements/
```

### Add to your project

```tsx
import { LanguageSwitcher } from "@/components/elements/language-switcher";

export function App() {
  return (
    <LanguageSwitcher
      locales={[
        { code: "en", label: "English" },
        { code: "fr", label: "Français" },
        { code: "es", label: "Español" },
      ]}
      onLocaleChange={(code) => console.log("changed to", code)}
    />
  );
}
```

Every component is TypeScript-first, ships its own props, and works with your existing `next-intl`, `react-i18next`, or custom i18n setup.

## Components

### Language Switcher

A dropdown or pill-style component that allows users to switch between locales. Supports:
- Multiple variants: dropdown, pill, segmented
- RTL language detection
- Custom locale formatting
- Accessibility (keyboard navigation, ARIA labels)

### Locale Picker

A searchable locale selector with native language names and optional flag icons. Features:
- Search/filter locales
- Native language names
- RTL-aware
- Customizable rendering

### RTL Layout

Automatic right-to-left layout support for Arabic, Hebrew, and other RTL languages. Includes:
- Direction detection
- CSS logical properties
- Mirror icons
- Text alignment

### Translation Widget

A side-by-side translation view for comparing source and target text. Useful for:
- Translation management
- Content localization
- Review workflows

## i18n Library Compatibility

Babelize Elements works with every major i18n library:
- next-intl
- react-i18next
- react-intl (FormatJS)
- LinguiJS
- Custom i18n setups

The components are library-agnostic — pass your own locale state and callbacks.

## Contributing

This library is built by its community. If a component doesn't exist yet, check the open issues — or read the contributing guide and build the first version yourself.

1. Browse open issues on GitHub
2. Build the component following the contribution guide
3. Open a pull request
4. Maintainers review and merge it
5. It ships to the docs for everyone

## License

MIT — free forever, use in any project, commercial or not.

## Links

- GitHub: https://github.com/babelize/babelize-elements
- Documentation: https://elements.babelize.org
- Issues: https://github.com/babelize/babelize-elements/issues