Desarrollo

Alea UI kit

The React design system with motion built in: accessible components, design tokens for dark and light, and a Figma kit from the same source.

Versión 0.1.0React 18.3+ · 19TypeScriptNúcleo MIT

Características

Más de 200 componentes

De botones y formularios a tablas de datos, gráficos, editores, agendas y chat con IA, en un solo sistema coherente.

Accesible por defecto

Teclado, foco, lectores de pantalla, movimiento reducido y alto contraste vienen incluidos y se revisan en cada página.

Movimiento incluido

Alea Motion le da a cada componente sus transiciones y microinteracciones, con tokens que puedes ajustar o apagar.

Oscuro, claro y cuatro estilos

Un solo juego de tokens; encima, Fun Lab, Glass, Midnight y Graphite, y tu marca en pocas líneas.

Dos idiomas

Los textos del kit vienen en inglés y español, las fechas y números siguen el idioma y funciona de derecha a izquierda.

Un kit de Figma con los mismos tokens

Variables, estilos y sets de componentes generados desde el código, nunca dibujados a mano.

Navegadores compatibles

Las dos últimas versiones de Chrome, Edge, Firefox y Safari (16.4 en adelante), en escritorio y móvil. El estilo Glass curva la luz en sus bordes en navegadores Chromium; los demás muestran el mismo vidrio esmerilado sin la curva. El renderizado en servidor funciona con cualquier framework de React.

Instalar

npm

pnpm

yarn

bun

Navegador

npm install @alea/ui

¿Prefieres ser dueño del código? La CLI copia a tu proyecto el código de los componentes que elijas. Guía de instalación

Uso

import '@alea/ui/styles.css';
import { ThemeProvider, Button } from '@alea/ui';

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <Button>Hello</Button>
    </ThemeProvider>
  );
}

TypeScript

Alea está escrito en TypeScript e incluye sus tipos: cada prop está tipada y documentada, así tu editor la completa y explica. No hace falta ningún paquete extra.

import type { ButtonProps } from '@alea/ui';

const primary: ButtonProps = { variant: 'primary', size: 'lg' };

Sin React

Los tokens y la capa de movimiento son CSS puro: úsalos con cualquier framework o sin ninguno.

npm install @alea/tokens @alea/motion

@import '@alea/tokens/tokens.css';
@import '@alea/motion/motion.css';

.card { background: var(--alea-surface); border-radius: var(--alea-radius-lg); }

¿Necesitas ayuda?

Busca en la documentación con ⌘K. Para un error, una pregunta o una idea, escribe a hi@alevasquez.dev. Los clientes de Alea Pro reciben respuesta en dos días hábiles.