'/%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}
De la instalación a producción
Componentes de React con accesibilidad, movimiento y temas por dentro. Instala un paquete, envuelve tu app y construye; cada página tiene ejemplos en vivo para copiar.
npm install @alea/ui
npm install @alea/uiInicio rápido
Tres pasos
npm install @alea/ui
Pruébalo
Entran props, salen interfaz y código
Cada prop de cada página funciona así: cámbiala y ve el componente y el código que lleva.
<Button iconStart={<Sparkles />}>Save changes</Button>
En esta sección
Guías y herramientas
- IntroducciónEl sistema de diseño completo para React: componentes accesibles de formularios a IA, Alea Motion, tokens de diseño W3C y un kit de Figma de la misma fuente.
- 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.
- PlaygroundCada componente en cada estado, oscuro y claro lado a lado.
Lo que obtienes
Menos que conectar
Tipado y documentado
Cada prop está tipada y descrita, y las tablas de la documentación salen de la misma fuente.
Se renderiza en el servidor
Los componentes se renderizan a HTML en el servidor, así las páginas muestran su contenido antes de que cargue el JavaScript.
Dos idiomas incluidos
Etiquetas, anuncios, fechas y números en inglés y español, con tus propios textos encima.
Teclado y lectores de pantalla
El foco, los roles, los nombres y los anuncios se manejan dentro de cada componente.
Tu marca en una llamada
brandVariables convierte un acento, un radio y una densidad en un tema completo.
Movimiento que tú controlas
Un modo para la app, un preset por componente, o ninguno.
Paquetes
Toma solo lo que necesitas
@alea/uiLos componentes, sus estilos y los textos del kit.npm install @alea/ui@alea/motionLos patrones de movimiento y sus ayudas: Presence, AutoHeight, NumberRoll, TextSwap, Reveal.npm install @alea/motion@alea/tokensLos tokens de diseño como variables CSS, JSON y variables de Figma.npm install @alea/tokens@alea/cliCopia componentes a tu proyecto para tenerlos y editarlos.npx alea add button select@alea/proGráficos, DataGrid, los editores, Scheduler, MediaPlayer y efectos premium.Alea Pro@alea/blocksSecciones y plantillas listas hechas con los componentes.Alea Pro
Recetas
Configúralo en tu framework
// main.tsximport { createRoot } from 'react-dom/client';import { ThemeProvider } from '@alea/ui';import '@alea/ui/styles.css';import { App } from './App';createRoot(document.getElementById('root')!).render(<ThemeProvider defaultTheme="system"><App /></ThemeProvider>,);
Preguntas