Astryx is Meta's open-source design system for React — and on November 8, 2026 it surged to the top of GitHub's daily trending list. We installed version 0.7.11 and built a real small-business page with it, to check whether the hype survives contact with a real project.
Astryx is a free, open-source design system (MIT licence) from Meta, built on React 19+ and StyleX (Meta's compile-time CSS engine). It grew inside Meta over eight years, where it became the company's most-used design system, powering 13,000+ internal apps — including Facebook, Instagram and Threads — before being open-sourced in June 2026. It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship page templates and a command-line interface (CLI) as one system. Its pitch is that the same components, docs and CLI serve both people and AI coding agents.
It was already public since June, so this is a resurgence, not a launch: when we opened the repo on November 8, 2026 it showed 15,676 stars, up 863 in 24 hours and 1,205 in the last 7 days, with version 0.7.11 released the day before. A surge that big deserves a hands-on check instead of a summary of other people's posts, so we ran one — on our own test page, with our own hands.
Requirements (from the official README): React 19 or later — react and react-dom are peer dependencies. Our test machine ran Node v24.22.1 with npm 10.9.4 on Ubuntu Linux. We installed Astryx locally in one folder (no admin rights, nothing system-wide). Before installing, we verified the package identity: the scoped names below are copied verbatim from the repo README — the README itself warns that the unscoped astryx package on npm is unrelated, so type the scope carefully. Then:
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
Resolved versions on our 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. The install took about 18 seconds with zero errors. The documented setup is three CSS imports (order matters: reset, then components, then theme) plus a theme provider:
@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}>{/* your app */}</Theme>
No build plugin, no PostCSS and no Babel config were needed — Astryx ships pre-built CSS and JS. That claim checked out: our Vite project built with the stock React plugin only.
Target: a page we wrote ourselves for the test — a fictional bakery's "request a quote" card ("Maple Corner Bakery", invented sample text, not a real business). It exercises the pieces a small business actually needs: a Card, a Heading, descriptive Text, a Badge ("Open today"), two TextInput fields (name and email, both required) and a primary Button that shows a confirmation message when clicked. Every prop we used came straight from the CLI docs — for example, Button takes a required label plus variant="primary", and TextInput takes a required label and value:
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>
The CLI works with no login and no account. npx @astryxdesign/cli component --list printed 174 components — more than the README's "150+" claim — each with its import path. component Button and component TextInput returned full documentation: anatomy, best practices, accessibility notes and a complete props table. template --list showed ready-made page templates (dashboard, login, AI chat, card grid and more). This is genuinely useful: the docs live in your terminal, next to your code, instead of in a browser tab you have to keep re-opening.
Yes, first try. npx vite build succeeded in 1.57 seconds (2,283 modules). We checked the built files: our sample text ("Maple Corner Bakery", "Request a quote") is in the bundle, and the built CSS contains Astryx's design tokens (for example --color-background-surface). Then we opened the page in a real Chromium browser: the card rendered fully styled — rounded corners and a soft shadow, a grey "Open today" pill, a bold heading, bordered input fields with "Required" markers, and a solid black primary button. It looked like a designed component, not bare HTML. We also drove it: typing a name into the field and clicking "Request a quote" showed the confirmation text "Thanks — test quote received." No console errors appeared.
| What we checked | Result |
|---|---|
| Install from the official npm packages, exactly as documented | Passed. ~18 seconds, zero errors, versions as listed above. |
| CLI lists components and documents them | Passed. 174 components; Button and TextInput docs complete with props. |
| Vite build with only the documented CSS imports + theme provider | Passed. 1.57 s, no build plugin needed. |
| Components render styled in a real browser | Passed. Card, Badge, Heading, Text, TextInput and Button all rendered with Astryx styling; typing + button click worked. |
| Theme file contains dark-mode tokens | Passed (file check). The neutral theme CSS defines 164 --color- tokens and contains dark-mode rules. We did not interactively test a light/dark toggle, so we don't claim that part. |
Our verdict: it does what the README promises, on the first try, from the docs alone. The component quality is the real story: labels, required markers, accessibility notes and validation states are built in rather than bolted on, which is exactly what a small-business site needs and what usually gets skipped when a page is hand-rolled. The rough edges are honest ones — see the next section — not hidden ones.
@astryxdesign/charts) have no stable release yet, and the experimental lab components aren't published to npm at all. We didn't test them.init command and the MCP server are genuinely part of the system, but our test used the documented manual setup. If you use an AI coding agent, your mileage may differ — the CLI is the intended bridge, not a separate product.meta/astryx and the npm packages @astryxdesign/core, @astryxdesign/theme-neutral, @astryxdesign/cli and @stylexjs/stylex. We verified the scoped names against the repo README before installing.astryx package on npm is an unrelated package. Always use the @astryxdesign/ scope.Yes — it is open source under the MIT licence. You can use it in commercial projects. Your hosting and your own developer time are separate costs, but the library itself costs nothing.
To use Astryx directly, yes — it is a React component library, and it requires React 19+. If you don't write code, the practical way to benefit is to have someone build your site with it (or with any component library); the value for you is a consistent, accessible interface, not the library name.
Yes — the official docs include a no-build CDN route: the CLI command npx @astryxdesign/cli template --cdn writes a standalone HTML page that loads React and Astryx from a CDN via an import map. We tested the Vite route, not the CDN route, so treat the CDN path as documented-but-not-verified-by-us.
The README says 150+. The CLI on our machine listed 174 on version 0.7.11. Either way, the count includes layout primitives (Stack, Card) and full patterns (chat, calendars, tables), not just buttons.
Meta calls it Beta, and it powers 13,000+ internal apps, so the components are battle-tested but the public API can still change. For a new small-business site, that is an acceptable trade-off; for a site you cannot afford to touch again for a year, pin the exact version (we used 0.7.11) and budget a check-in when you upgrade.
It is more than a slogan: the CLI ships component docs, templates and codemods designed to be read by coding agents as well as people. We verified the CLI's docs output ourselves. The MCP server exists too, but we did not run it in this test.
Astryx is one of the tools we use when we build websites for small businesses — consistent components, accessible forms and a theme that actually matches your brand, instead of a page assembled from mismatched parts. See our website service, or browse our free tools — QR codes, invoices, colour tools and more, all running locally in your browser.
We can put your design on T-shirts, hoodies, mugs, posters and more — printed to order in Quebec, no minimums, with a free preview before you pay.
Contact us for a free quote