Código abierto • Licencia MIT

Componentes de UI de localización para React.

Componentes de React de código abierto para internacionalización (i18n). Crea selectores de idioma, selectores de configuración regional y diseños RTL en minutos: con licencia MIT y desarrollados por la comunidad.

ComenzarExplorar componentes B
app.tsx
import { LanguageSwitcher } from '@babelize/elements';

export default function App() {
  return (
    <LanguageSwitcher variant="dropdown=" />
  );
}
Potente por defecto

Todo lo que necesitas para localizar.

Creado para aplicaciones modernas de React. Instala y publica a nivel global.

Selectores de idioma

Selectores de idioma listos para usar, con menús desplegables, píldoras, banderas y soporte completo de RTL.

Selectores de configuración regional

Selectores de configuración regional con búsqueda, nombres nativos y banderas.

Soporte de diseño RTL

Detección automática de RTL y gestión de la dirección del diseño.

Integración con i18n

Funciona con react-intl, next-intl, i18next, LinguiJS y más.

app.tsx
"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);
 }}
 />
 );
}

Únete a nuestra comunidad

Conéctate con otros desarrolladores, obtén ayuda y contribuye al proyecto

Soporte

Preguntas frecuentes

Todo lo que necesitas saber sobre cómo usar Babelize Elements en tus proyectos de React. ¿No encuentras lo que buscas? Consulta nuestras discusiones en GitHub.

Instala la biblioteca completa con `npm install @babelize/elements`, o añade componentes individuales con `npx shadcn@latest add @babelize/language-switcher` (o `npx @babelize/elements add language-switcher`). Funciona con Next.js, Remix y cualquier aplicación de React.

¡Por supuesto! Como el código es tuyo, cada componente es totalmente personalizable con clases y props de Tailwind CSS. Cambia colores, espaciados, animaciones y comportamiento como quieras. Sin restricciones de diseño.

Cada componente integrado es revisado por los mantenedores y cumple nuestra lista de verificación de accesibilidad, TypeScript y localización antes de documentarse. Se usa en aplicaciones de producción en todo el mundo.

Sí, con licencia MIT y gratuito para siempre. El código está en GitHub, las contribuciones son bienvenidas y puedes usar los componentes en cualquier proyecto, comercial o no. No se requiere atribución.

Babelize Elements funciona con todas las bibliotecas i18n principales: next-intl, react-i18next, react-intl, LinguiJS, FormatJS y más. Los componentes son independientes de la biblioteca: pasa tu propio estado de configuración regional y tus callbacks.

Explora los issues abiertos en GitHub, crea el componente siguiendo la guía de contribución y abre un pull request. Los mantenedores lo revisan y lo integran, y se publica en la documentación para todos.