'/%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
Qué incluye
Todo Alea en un solo lugar: lo que hace cada componente sin trabajo extra, los paquetes, cada componente por categoría, el kit de Figma, cómo se prueba y lo que añade Alea Pro.
Integrado en cada componente
No tienes que conectarlo: viene con cada componente, en cada look e idioma.
Accesibilidad
- Roles, nombres, estados y relaciones definidos dentro de cada componente
- El foco se mueve y se devuelve en overlays, menús y diálogos
- Anuncios en vivo para toasts, contadores, subidas, filtros y cambios de estado
- Tokens de texto en AA sobre cada superficie, con un modo de alto contraste en AAA
- Objetivos de al menos 24 px; el estado nunca se indica solo con color
Navegación por teclado
- Tab entre controles; los widgets compuestos son una sola parada
- Flechas, Inicio, Fin y escritura rápida dentro de listas, menús, cuadrículas, pestañas y árboles
- Escape cierra la capa superior y devuelve el foco
- Cada página de componente lista sus teclas
- Anillos de foco visibles en cada look
Movimiento
- Patrones con nombre hechos con tokens de easing y duración
- Cuatro modos: expresivo, productivo, reducido y apagado
- Un preset de motion para cada overlay
- El movimiento reducido se respeta por defecto: todo aparece en su sitio
- Solo transform y opacity, sin bloquear nunca la interacción
Temas y marca
- Oscuro, claro y sistema, por página o por área
- Cuatro looks: Fun Lab, Graphite, Midnight y Glass
- Alto contraste y fondo liso para cualquier look
- brandVariables: acento, radio, densidad y fuentes en una llamada
- Solo tokens semánticos, así que un tema es un archivo
Idiomas
- Cada etiqueta y anuncio integrado en inglés y español
- Tus propios textos para cualquier otro idioma
- Fechas, horas y números con el formato del idioma
- Diseños de derecha a izquierda
Renderizado en servidor
- Los componentes se renderizan a HTML en el servidor y se hidratan en el navegador
- Sin saltos de diseño por los estilos: una hoja de estilos, sin CSS en tiempo de ejecución
- Esta documentación se prerenderiza con los mismos componentes
Tipos y documentación
- Cada componente y prop tipado y descrito
- Tablas de props, especificaciones, anatomía y tokens por componente
- Ejemplos en vivo para copiar en cada página
Responsive
- Props adaptables por breakpoint en los componentes de layout
- Patrones para teléfono: drawers, navegación inferior, action sheets
- Cada página de la documentación revisada en anchos de teléfono y escritorio
Paquetes
| Paquete | Qué contiene | Licencia |
|---|---|---|
@alea/ui250 componentes | Los componentes, sus estilos, los iconos mediante Lucide, los textos del kit y ThemeProvider. | MIT |
@alea/motion9 helpers | Los patrones y helpers de motion: Presence, AutoHeight, NumberRoll, TextSwap, Reveal, MorphIcon, StreamingText. | MIT |
@alea/tokensTokens W3C | Tokens primitivos, base y semánticos como variables CSS, JSON y variables de Figma, generados desde los mismos archivos. | MIT |
@alea/clinpx alea add | Copia el código de cualquier componente a tu proyecto para tenerlo y editarlo. | MIT |
@alea/pro72 componentes | Gráficos, DataGrid, los editores de texto enriquecido y Markdown, Scheduler, MediaPlayer, Kanban, RoadmapTimeline y efectos premium. | Alea Pro |
@alea/blocksBloques y plantillas | Secciones listas y plantillas de página completas: dashboards, listas, formularios, perfiles, resultados, landing pages. | Alea Pro |
Cada componente, por categoría
Cada página documenta sus componentes con ejemplos, props, especificaciones, notas de accesibilidad y sus teclas.
Acciones 11
Tipografía 9
Maquetación 31
Formularios 56
- TextField
- SearchField y PasswordField
- NumberField
- Checkbox
- Radio
- Switch
- Select
- Slider
- EmojiPicker
- WheelPicker
- ListBox
- InputGroup
- ComboBox y TagField
- Fechas y horas
- Form
- FileUpload
- Rating
- Selectores de color
- OTPField
- Cascader
- TreeSelect
- Transfer
- Mentions
- Autocomplete
- MultiSelect
- Fieldset
- MarkdownEditorPro
- RichTextEditorPro
- Editable
Capas 18
Navegación 27
Datos 52
- Badge
- Tag
- Avatar
- Persona
- Chat
- Comment
- MediaCard y CalloutCard
- FilterBar
- StructuredList
- ContainedList
- Arrastrar y soltar
- Table
- ListView
- Tree
- Descriptions y Statistic
- Timeline
- Carousel
- MediaPlayerPro
- Image
- QRCode
- CalendarViewPro
- SchedulerPro
- DataGridPro
- SortableList y KanbanBoardPro
- VirtualListPro
- Ribbon e Indicator
- Countdown y FormattedNumber
- Status y ColorSwatch
Gráficos 17
Avisos 16
Efectos 38
IA 8
Flujo de trabajo 12
Extras 10
Para diseño
Kit de Figma
156 conjuntos de componentes con las props de React como variantes y propiedades, variables en Dark y Light y en cada look, 174 iconos, una página de especificación por componente y plantillas adaptables.
Kit de FigmaFundamentos
Color, tipografía, espacio e iconos como tokens, con qué token usar para qué y el contraste de cada par.
ColoresPlantillas y bloques
Páginas reales hechas con los componentes, para empezar un producto desde algo que ya funciona.
PlantillasCómo se prueba
- Pruebas unitarias en los componentes, con una revisión automática de accesibilidad
- Cada página de la documentación revisada en accesibilidad en AA y AAA, en cada uno de los cuatro looks, en oscuro y claro
- Recorridos con teclado: búsqueda, diálogos, menús, pestañas, selects y la navegación móvil
- Un barrido de cada página en anchos de teléfono y escritorio buscando desbordes y foco visible
- El plugin de Figma probado contra un modelo del archivo de Figma
Gratis y Pro
| Incluido | MIT | Alea Pro |
|---|---|---|
| Componentes, motion, tokens, CLI | Sí | Sí |
| Accesibilidad, teclado, temas, looks, dos idiomas | Sí | Sí |
| Kit y plugin de Figma | Sí | Sí |
| Gráficos, DataGrid, editores, Scheduler, MediaPlayer | No | Sí |
| Efectos premium | No | Sí |
| Bloques y plantillas | No | Sí |
| Licencia comercial para trabajos de clientes | No | Sí |
