Repolode
Enviar
facebook

facebook/astryx

Un sistema de diseño open source para React con más de 150 componentes accesibles, temas y una CLI, basado en React 19 y StyleX.

Ver en GitHubSitio web
Estrellas
13,703
Forks
1,180
Issues abiertos
526
Último commit
hace 22 horas

¿Qué es?

Astryx es un sistema de diseño open source que nació dentro de Meta y ahora está disponible para uso externo. Ofrece componentes tipados para React, temas de marca, modo oscuro y plantillas listas para usar, todo en un único sistema.

Importas CSS precompilado y un proveedor de temas y, luego, usas los componentes directamente, sin necesidad de un plugin de compilación. Los estilos se escriben con StyleX, pero quedan ocultos para quienes usan la biblioteca, que pueden sobrescribir los componentes con className usando Tailwind, CSS Modules o CSS sin procesar. Los temas son conjuntos de sobrescrituras de propiedades personalizadas de CSS, por lo que puedes personalizar un tema sin bifurcar el código fuente de los componentes.

El proyecto también incluye una CLI para consultar la documentación de los componentes, acceder a plantillas, generar estructuras iniciales y ejecutar codemods. Su API y documentación están diseñadas para que desarrolladores y asistentes de IA puedan trabajar a partir de la misma referencia. El proyecto está actualmente en beta y requiere React 19 o posterior.

Funciones clave

  • 01Más de 150 componentes accesibles para React, con compatibilidad completa con TypeScript.
  • 02Siete temas listos para usar que se pueden personalizar mediante propiedades personalizadas de CSS.
  • 03Modo oscuro y temas de marca.
  • 04Los componentes se pueden sobrescribir con className usando Tailwind, CSS Modules o CSS sin procesar.
  • 05Un comando swizzle extrae el código fuente de un componente a tu proyecto.
  • 06Una CLI para la documentación de componentes, plantillas, generación de estructuras iniciales y codemods.

Casos de uso

  • Crear una aplicación React que necesite una biblioteca de componentes coherente y accesible.
  • Crear una interfaz de producto con una marca propia mediante la personalización de variables del tema, en lugar de bifurcar los componentes.
  • Proporcionar a asistentes de programación con IA una API de componentes documentada para crear interfaces.

Inicio rápido

  1. 1

    Instala core, un tema, StyleX y la CLI con npm

    npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli
  2. 2

    Sigue la guía de inicio rápido del paquete core para importar CSS y configurar el proveedor del tema

  3. 3

    Colaboradores: habilitad Corepack e instalad las dependencias en el repositorio

    corepack enable pnpm install

Antes de usarlo

  • Actualmente está en beta, por lo que las API pueden cambiar.
  • Los paquetes publicados @astryxdesign/vega y @astryxdesign/charts solo tienen versiones @canary; todavía no hay una versión estable.
  • Requiere React 19 o posterior.

Temas

#react#design-system#ui-components#stylex#typescript#theming#accessibility

Preguntas frecuentes

¿Qué es astryx?
Un sistema de diseño open source para React con más de 150 componentes accesibles, temas y una CLI, basado en React 19 y StyleX. Astryx es un sistema de diseño open source que nació dentro de Meta y ahora está disponible para uso externo. Ofrece componentes tipados para React, temas de marca, modo oscuro y plantillas listas para usar, todo en un único sistema.
¿astryx es gratuito? ¿Qué licencia tiene?
astryx es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿astryx sigue mantenido?
Mantenimiento activo. El último commit de astryx fue el 19 oct 2026.
¿Para qué puedo usar astryx?
Crear una aplicación React que necesite una biblioteca de componentes coherente y accesible. Crear una interfaz de producto con una marca propia mediante la personalización de variables del tema, en lugar de bifurcar los componentes. Proporcionar a asistentes de programación con IA una API de componentes documentada para crear interfaces.
¿Cómo se instala astryx?
Instala core, un tema, StyleX y la CLI con npm: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli Sigue la guía de inicio rápido del paquete core para importar CSS y configurar el proveedor del tema Colaboradores: habilitad Corepack e instalad las dependencias en el repositorio: corepack enable pnpm install
¿Dónde consigo astryx?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/facebook/astryx

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados