Saltar al contenido

DiseñoColor, tipografía, espacio e íconos como tokens, las pautas detrás de ellos y el kit de Figma.Resumen
Fundamentos
ColoresOcho escalas OKLCH del Palette Generator, y los tokens semánticos que cambian entre oscuro y claro.
TipografíaCrimson Pro para títulos, Inter para todo lo demás, JetBrains Mono para código, en una sola escala de tamaños.
Espacio y tamañosUna escala de espacio de 4 px, alturas de controles, radios y sombras.
ÍconosÍconos de Lucide en los tamaños y el trazo del kit, a través de un componente Icon que puedes apuntar a otro set.
Pautas
AccesibilidadLo que hace cada componente por el teclado, el lector de pantalla, el contraste y el movimiento, y lo que todavía te toca a ti.
Kit de diseño
Kit de FigmaLos mismos tokens como variables de Figma en Dark y Light, y componentes con las mismas props.
DesarrolloInstala, envuelve tu app, adáptala a tu marca y pruébala en vivo.Resumen
Primeros pasos
IntroducciónEl sistema de diseño completo para React
InstalaciónInstala desde npm o copia el código con la CLI, agrega la hoja de estilos y el proveedor de tema.
TemasTemas oscuro, claro y del sistema, por página o por área, y cómo cambiar los tokens para tu marca.
Herramientas
PlaygroundCada componente en cada estado, oscuro y claro lado a lado.
ComponentesCada componente por categoría, accesible y documentado.Resumen
RecursosPlantillas, bloques, el playground y Alea Pro.Resumen
Plantillas y bloques
BloquesSecciones listas hechas con los componentes
PlantillasPáginas completas para empezar
Alea Pro
LicenciaCómo se licencia Alea
Alea ProLa parte paga de Alea
MotionPatrones con nombre hechos con tokens de curva y duración, modos y efectos.Resumen
Motion
Sistema de motionLas curvas y duraciones detrás de cada transición, y cómo se maneja el movimiento reducido.
Componentes de movimientoLa prop motion en cada overlay, y los componentes pequeños detrás de los patrones
MorphMorphing de elemento compartido

Alea
Desarrollo
Primeros pasos
Introducción

Nuevo · componentes de IA, Scheduler, MediaPlayer y más de 300 componentes

Componentes con un poco de diversión adentro

Alea es el sistema de diseño completo para React: más de 300 componentes accesibles, de formularios, capas y datos a IA, gráficos, editores y media, con Alea Motion para las transiciones y tokens W3C para oscuro, claro y alto contraste que mueven tanto el código como el kit de Figma. Trae un aspecto cálido por defecto (acento de morado a amarillo, títulos en Crimson Pro) que puedes adaptar a tu marca.

Empezar Ver componentes

Accesible por defecto

Teclado, lectores de pantalla, foco y escritura de derecha a izquierda incluidos. Cada componente se prueba con axe.

Oscuro y claro

Un atributo cambia el tema, para la página o cualquier área. System sigue al sistema operativo.

Lo mismo en Figma

Variables en Dark y Light y cada componente con las mismas props, generados desde los tokens, con movimiento y una página de specs cada uno.

npm or copy-paste

Instala @alea/ui, o copia el código de un componente a tu proyecto con la CLI.

Qué incluye

7Acciones

4Typography

12Layout

29Formularios

11Overlays

17Navigation

28Data display

12Charts

9Feedback

13Efectos

3AI

4Extras

Cada página tiene ejemplos en vivo, props, notas de accesibilidad y de teclado. Velos todos, o todos los componentes en una página.