Componentes
Colección completa de componentes de interfaz de localización para React. Explora selectores de idioma, selectores de configuración regional y diseños RTL listos para producción.
Selectores de idioma
Componentes profesionales de selector de idioma, diseñados para una selección de configuración regional fluida en toda tu aplicación.
| Componente | Descripción |
|---|---|
| Selector de idioma | Desplegable completo con búsqueda, banderas y compatibilidad con RTL |
| Selector de idioma en píldora | Selector animado en estilo píldora con navegación por teclado y compatibilidad con RTL |
Selectores de configuración regional
Elige una región y consulta los valores predeterminados de configuración regional que la acompañan, para páginas de ajustes y flujos de incorporación.
| Componente | Descripción |
|---|---|
| Selector de configuración regional | Selector de región con moneda, fecha, número y primer día de la semana derivados, además de búsqueda |
Entrada de teléfono
Campo internacional para números de teléfono con selector de país y búsqueda de prefijos telefónicos.
| Componente | Descripción |
|---|---|
| Entrada de teléfono | Selector de país con banderas, prefijos telefónicos y búsqueda para 50 países |
Navegación
Barra de navegación completa con soporte de localización integrado.
| Componente | Descripción |
|---|---|
| NavBar | Navegación adaptable con selector de idioma, menú móvil, botón CTA y enlace a GitHub |
Traducción
Vistas de traducción lado a lado para comparar y editar el texto de origen y de destino.
| Componente | Descripción |
|---|---|
| Widget de traducción | Panel de destino editable, diseño compatible con RTL y estilo claymorphism |
Especificaciones técnicas
Características principales
- Soporte completo de TypeScript - Seguridad de tipos completa con IntelliSense
- Diseño adaptable - Enfoque mobile-first con optimización por breakpoints
- Cumplimiento de accesibilidad - Estándares WCAG 2.1 AA con soporte para lectores de pantalla
- Documentación completa - Ejemplos de uso, referencia de la API y buenas prácticas
Integración y compatibilidad
- React 18+ con soporte para hooks
- Compatibilidad con App Router de Next.js 13+
- Integración con el sistema de diseño shadcn/ui
- Estilos Tailwind CSS basados en utilidades
- Compatibilidad con gestores de paquetes npm/pnpm/yarn
Recursos
- Guía de inicio rápido - Instalación y configuración inicial
- Referencia de la API - Props del componente y configuración
- Guía de contribución - Directrices de desarrollo y contribución
Integración con la CLI de ShadCN
Instala Babelize Elements con la CLI de shadcn: añade el registro @babelize y luego incorpora a tu proyecto selectores de idioma, campos de entrada y widgets de traducción.
Selector de idioma
Selector de idioma para React listo para copiar y pegar, con desplegable, búsqueda, compatibilidad con RTL y accesibilidad completa. Funciona con next-intl, react-i18next y cualquier configuración de i18n.