'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Empezar
Compatibilidad
What Alea runs on, what it renders with, and what it needs from the page. Everything here is checked on every release.
React
React 18.3 y React 19, con react-dom de la misma versión. Se admiten el modo estricto y las funciones concurrentes. Los paquetes son solo módulos ES; cualquier bundler o framework moderno los maneja.
Paquete | Necesita |
|---|---|
| @alea/ui | react, react-dom ≥ 18.3 |
| @alea/motion | react ≥ 18.3 (el CSS funciona sin React) |
| @alea/tokens | nada |
| @alea/pro | @alea/ui 0.1.0, @alea/motion 0.1.0, react-aria-components ≥ 1.10, lucide-react ≥ 0.500 |
| @alea/cli | Node 20 o posterior |
Renderizado en servidor
Cada componente renderiza en el servidor sin acceder a window durante el render; las partes solo de navegador (medidas, luz del puntero, transiciones de vista) arrancan en efectos. El tema se fija en el elemento html antes de la hidratación, así que no hay parpadeo ni avisos de hidratación. Este sitio se prerrenderiza de la misma forma.
Navegadores
Navegador | Versiones | Notas |
|---|---|---|
| Chrome, Edge | Las dos últimas versiones | Todo, incluida la luz que se curva en los bordes de las superficies de vidrio y las transiciones de vista. |
| Firefox | Las dos últimas versiones | Todo. El vidrio es esmerilado sin la curvatura; las transiciones de página son instantáneas. |
| Safari | 16.4 y posteriores | Todo. El vidrio es esmerilado sin la curvatura; las transiciones de página son instantáneas en versiones sin transiciones de vista. |
| iOS Safari, Android Chrome | Igual que arriba | Las áreas táctiles miden 44 px o más; los efectos solo de puntero no estorban. |
La base es lo que comparten estos navegadores: anidamiento CSS, container queries, color-mix(), :has(), el elemento dialog y la Popover API. Lo que va más allá (lente del fondo, transiciones de vista, animación por scroll) es progresivo: la página funciona igual sin ello.
Las preferencias de cada persona
Movimiento reducido
Las transiciones se reducen a opacidad y los bucles se detienen, desde el ajuste del sistema o los tokens de movimiento.
Alto contraste y colores forzados
Cada aspecto tiene una variante de alto contraste; en el modo de colores forzados mandan los colores del sistema y cada borde sigue visible.
De derecha a izquierda
Los layouts usan propiedades lógicas; pon dir="rtl" en el elemento html y todo se refleja.
Idiomas
Los textos propios del kit vienen en inglés y español; fechas y números siguen la configuración regional que le das al provider.
Frameworks
Vite, Next.js (App Router y Pages), React Router y Remix, Astro con la integración de React, y una etiqueta script normal mediante un CDN. Cada configuración tiene un proyecto de ejemplo que se construye y se abre en un navegador en cada versión, comprobando el render, el cambio de tema y que el marcado del servidor hidrata sin avisos. Los pasos están en la Guía de instalación.