Astryx est le design system open source de Meta pour React — et le 8 novembre 2026, il a bondi en tête du classement quotidien des tendances GitHub. Nous avons installé la version 0.7.11 et construit une vraie page de petite entreprise avec, pour vérifier si l'engouement résiste à un projet réel.
Astryx est un design system gratuit et open source (licence MIT) de Meta, construit sur React 19+ et StyleX (le moteur CSS à compilation de Meta). Il a grandi chez Meta pendant huit ans, où il est devenu le design system le plus utilisé de l'entreprise, alimentant plus de 13 000 applications internes — dont Facebook, Instagram et Threads — avant d'être publié en open source en juin 2026. Il fournit plus de 150 composants accessibles, des thèmes au niveau de la marque, un mode sombre, des modèles de pages prêts à l'emploi et une interface en ligne de commande (CLI) en un seul système. Son pari : les mêmes composants, la même documentation et la même CLI servent autant les humains que les agents de codage IA.
Il était déjà public depuis juin : c'est donc une résurgence, pas un lancement. Quand nous avons ouvert le dépôt le 8 novembre 2026, il affichait 15 676 étoiles, soit 863 de plus en 24 heures et 1 205 sur les 7 derniers jours, avec la version 0.7.11 publiée la veille. Un bond aussi fort mérite un test concret plutôt qu'un résumé des publications des autres — alors nous en avons fait un, sur notre propre page de test, de nos propres mains.
Prérequis (selon le README officiel) : React 19 ou plus récent — react et react-dom sont des dépendances paires. Notre machine de test tournait sous Node v24.22.1 avec npm 10.9.4 sur Ubuntu Linux. Nous avons installé Astryx localement dans un seul dossier (aucun droit administrateur, rien à l'échelle du système). Avant l'installation, nous avons vérifié l'identité des paquets : les noms ci-dessous sont copiés mot pour mot du README du dépôt — le README lui-même avertit que le paquet astryx sans portée sur npm est un paquet sans rapport, alors tapez la portée avec soin. Ensuite :
npm init -y npm install react@19 react-dom@19 @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex npm install -D @astryxdesign/cli vite @vitejs/plugin-react
Versions résolues sur notre machine : @astryxdesign/core 0.7.11, @astryxdesign/theme-neutral 0.7.11, @stylexjs/stylex 0.19.1, React 19.3.1, CLI 0.7.11, Vite 8.3.6. L'installation a pris environ 18 secondes, sans aucune erreur. La configuration documentée, c'est trois imports CSS (l'ordre compte : réinitialisation, puis composants, puis thème) et un fournisseur de thème :
@import '@astryxdesign/core/reset.css'; @import '@astryxdesign/core/astryx.css'; @import '@astryxdesign/theme-neutral/theme.css';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
<Theme theme={neutralTheme}>{/* votre application */}</Theme>
Aucun plugiciel de build, ni PostCSS ni Babel n'ont été nécessaires — Astryx livre du CSS et du JS déjà construits. Cette affirmation s'est vérifiée : notre projet Vite s'est construit avec le seul plugiciel React standard.
Cible : une page que nous avons écrite nous-mêmes pour le test — la carte « demander un devis » d'une boulangerie fictive (« Maple Corner Bakery », texte d'exemple inventé, pas une vraie entreprise). Elle utilise les éléments dont une petite entreprise a vraiment besoin : une Card, un Heading, du Text descriptif, un Badge (« Open today »), deux champs TextInput (nom et courriel, tous deux obligatoires) et un Button principal qui affiche un message de confirmation quand on clique. Chaque propriété utilisée vient directement de la documentation de la CLI — par exemple, Button prend un label obligatoire et variant="primary", et TextInput prend un label et une value obligatoires :
import {Button} from '@astryxdesign/core/Button';
import {Card} from '@astryxdesign/core/Card';
import {TextInput} from '@astryxdesign/core/TextInput';
<Card maxWidth={480} elevation="low">
<Badge label="Open today" />
<Heading level={1}>Maple Corner Bakery</Heading>
<TextInput label="Your name" value={name} onChange={setName} isRequired />
<TextInput label="Email" type="email" value={email} onChange={setEmail} isRequired />
<Button label="Request a quote" variant="primary" onClick={() => setSent(true)} />
</Card>
La CLI fonctionne sans connexion et sans compte. npx @astryxdesign/cli component --list a affiché 174 composants — plus que les « 150+ » annoncés par le README — chacun avec son chemin d'import. component Button et component TextInput ont renvoyé une documentation complète : anatomie, bonnes pratiques, notes d'accessibilité et tableau complet des propriétés. template --list a montré des modèles de pages prêts à l'emploi (tableau de bord, connexion, clavardage IA, grille de cartes, et plus). C'est vraiment utile : la documentation vit dans votre terminal, à côté de votre code, au lieu d'un onglet de navigateur à rouvrir sans cesse.
Oui, du premier coup. npx vite build a réussi en 1,57 seconde (2 283 modules). Nous avons vérifié les fichiers construits : notre texte d'exemple (« Maple Corner Bakery », « Request a quote ») est présent dans le paquet, et le CSS construit contient les jetons de design d'Astryx (par exemple --color-background-surface). Puis nous avons ouvert la page dans un vrai navigateur Chromium : la carte s'est affichée entièrement stylée — coins arrondis et ombre douce, pastille grise « Open today », titre en gras, champs de saisie bordés avec marqueurs « Required », et bouton principal noir uni. On aurait dit un composant dessiné, pas du HTML brut. Nous l'avons aussi pilotée : taper un nom dans le champ puis cliquer sur « Request a quote » a affiché le texte de confirmation « Thanks — test quote received. » Aucune erreur de console n'est apparue.
| Ce que nous avons vérifié | Résultat |
|---|---|
| Installation depuis les paquets npm officiels, exactement comme documenté | Réussi. ≈ 18 secondes, zéro erreur, versions indiquées ci-dessus. |
| La CLI liste les composants et les documente | Réussi. 174 composants ; documentation de Button et TextInput complète, propriétés incluses. |
| Build Vite avec seulement les imports CSS documentés et le fournisseur de thème | Réussi. 1,57 s, aucun plugiciel de build nécessaire. |
| Les composants s'affichent stylés dans un vrai navigateur | Réussi. Card, Badge, Heading, Text, TextInput et Button affichés avec le style Astryx ; saisie et clic sur le bouton fonctionnels. |
| Le fichier de thème contient des jetons de mode sombre | Réussi (vérification de fichier). Le CSS du thème neutre définit 164 jetons --color- et contient des règles de mode sombre. Nous n'avons pas testé interactivement de bascule clair/sombre, donc nous ne l'affirmons pas. |
Notre verdict : il fait ce que le README promet, du premier coup, à partir de la seule documentation. La vraie qualité, ce sont les composants : étiquettes, marqueurs « obligatoire », notes d'accessibilité et états de validation sont intégrés dès le départ plutôt qu'ajoutés après — exactement ce qu'il faut pour le site d'une petite entreprise et ce qu'on oublie d'habitude quand on code une page à la main. Les limites sont honnêtes — voir la section suivante — et non cachées.
@astryxdesign/charts) n'ont pas encore de version stable, et les composants expérimentaux lab ne sont pas publiés sur npm du tout. Nous ne les avons pas testés.init de la CLI et le serveur MCP font vraiment partie du système, mais notre test a utilisé la configuration manuelle documentée. Si vous utilisez un agent de codage IA, votre expérience peut différer — la CLI est le pont prévu, pas un produit séparé.meta/astryx et les paquets npm @astryxdesign/core, @astryxdesign/theme-neutral, @astryxdesign/cli et @stylexjs/stylex. Nous avons vérifié les noms avec portée par rapport au README du dépôt avant d'installer.astryx sans portée sur npm est un paquet sans rapport. Utilisez toujours la portée @astryxdesign/.Oui — il est open source sous licence MIT. Vous pouvez l'utiliser dans des projets commerciaux. Votre hébergement et votre propre temps de développement sont des coûts séparés, mais la bibliothèque elle-même ne coûte rien.
Pour utiliser Astryx directement, oui — c'est une bibliothèque de composants React, et elle exige React 19+. Si vous ne codez pas, la façon pratique d'en profiter est de faire construire votre site avec (ou avec n'importe quelle bibliothèque de composants) ; la valeur pour vous, c'est une interface cohérente et accessible, pas le nom de la bibliothèque.
Oui — la documentation officielle inclut une voie CDN sans build : la commande npx @astryxdesign/cli template --cdn écrit une page HTML autonome qui charge React et Astryx depuis un CDN via une carte d'imports. Nous avons testé la voie Vite, pas la voie CDN : considérez donc le chemin CDN comme documenté, mais non vérifié par nous.
Le README dit 150+. La CLI sur notre machine en a listé 174 avec la version 0.7.11. Dans les deux cas, le compte inclut des primitives de mise en page (Stack, Card) et des modèles complets (clavardage, calendriers, tableaux), pas seulement des boutons.
Meta l'appelle bêta, et il alimente plus de 13 000 applications internes : les composants sont donc éprouvés, mais l'API publique peut encore changer. Pour le site d'une nouvelle petite entreprise, c'est un compromis acceptable ; pour un site que vous ne pouvez pas vous permettre de retoucher pendant un an, épinglez la version exacte (nous avons utilisé 0.7.11) et prévoyez une vérification quand vous mettrez à jour.
C'est plus qu'un slogan : la CLI fournit de la documentation de composants, des modèles et des codemods conçus pour être lus aussi bien par les agents de codage que par les humains. Nous avons vérifié nous-mêmes la sortie de documentation de la CLI. Le serveur MCP existe aussi, mais nous ne l'avons pas exécuté dans ce test.
Astryx fait partie des outils que nous utilisons quand nous construisons des sites web pour les petites entreprises — des composants cohérents, des formulaires accessibles et un thème qui correspond vraiment à votre marque, au lieu d'une page assemblée à partir d'éléments disparates. Voyez notre service de création de sites web, ou parcourez nos outils gratuits — codes QR, factures, outils de couleur et plus, tous exécutés localement dans votre navigateur.
Nous pouvons imprimer votre design sur des t-shirts, chandails, tasses, affiches et plus — imprimé sur commande au Québec, sans minimum, avec un aperçu gratuit avant de payer.
Contactez-nous pour un devis gratuit