Armar botones, menús, tablas y formularios que se vean bien y que cualquier persona pueda usar lleva semanas. Astryx es el sistema de diseño de Meta para React y te da esas piezas listas, con código abierto y sin pagar nada.
¿Qué es?
Un sistema de diseño es un conjunto de componentes, es decir, piezas de interfaz reutilizables, junto con reglas de colores, tipografía y espaciado. Astryx nació dentro de Meta, donde lo desarrollaron durante ocho años. Según su README, hoy está detrás de más de 13,000 aplicaciones internas de la empresa.
Funciona con React 19 o más reciente y con StyleX, la herramienta de estilos de Meta que convierte el CSS en archivos estáticos al compilar. Trae más de 150 componentes accesibles y siete temas visuales listos para instalar.
Tiene licencia MIT, así que puedes usarlo en proyectos personales y comerciales. Sigue en fase beta, pero está muy activo: el repositorio supera las 27,000 estrellas y la versión 0.7.15 salió el 12 de noviembre de 2026, apenas un día después de la 0.7.14, que mejoró cómo responden los menús y las hojas inferiores al tacto.
¿Para qué te sirve?
Si arrancas un panel de administración en Next.js, te ahorra construir desde cero tablas, filtros, selectores de fecha y ventanas modales. InfoQ destaca que las tablas pueden virtualizarse, o sea, mostrar miles de filas sin que la página se trabe.
Si tu equipo ya usa Tailwind o CSS Modules, no tienes que abandonarlos: los componentes aceptan clases normales además de los estilos de StyleX.
Y si programas con ayuda de IA, Astryx incluye una herramienta de línea de comandos y un servidor MCP, el protocolo que usan los asistentes para consultar documentación. Así tu agente puede generar interfaces con los componentes reales en lugar de inventarlos.
Cómo empezar
Necesitas un proyecto con React 19. Desde la carpeta del proyecto instala el paquete principal, un tema y StyleX con el comando que da el README oficial:
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylexLa herramienta de línea de comandos se instala aparte como dependencia de desarrollo con el paquete @astryxdesign/cli. La documentación completa está enlazada desde el repositorio en GitHub.
Lo que debes saber
- Está en beta: entre versiones puede haber cambios que rompan código, como el cambio de nombre de una opción de las tablas en la 0.7.12. Fija la versión exacta en tu package.json.
- Si quieres modificar un componente a fondo, el comando swizzle copia su código a tu proyecto. Desde ese momento tú te encargas de mantener esa copia.
- InfoQ recoge dudas de algunos desarrolladores sobre el mantenimiento a largo plazo de un proyecto que depende de Meta.
- Exige React 19; si tu app sigue en React 18, primero tendrás que actualizarla.
- Pruébalo en un proyecto pequeño antes de llevarlo a producción.
Sigue leyendo
- TanStack Charts 1.0: gráficas a tu medida para React y más
- Vinext 1.0: tu app de Next.js corriendo sobre Vite
Fuentes
- GitHub: meta/astryx: An open source design system that’s fully customizable and agent ready
- InfoQ: Meta Open-Sources Astryx, its Agent-Ready React Design System
Imagen de portada: foto de picjumbo.com en Pexels.