Meta Open-Sources Astryx: An Agent-Ready React Design System With 150+ Accessible Components, Seven Themes, and a CLI

Meta has released Astryx, an open source design system that is fully customizable and built to be operated by both people and the AI agents working alongside them. It is available now in Beta. Astryx is not a new experiment. It grew inside Meta over the last eight years, where the company says it became its most-used and largest design system, shaped by the engineers, designers, and product teams who depend on it daily. The system ships 150+ accessible components (the docs site now lists 160+), brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive package. It is built on React and StyleX. You import pre-built CSS and use typed React components. There is no build plugin to wire up and no styling library to adopt. The trade-off Astryx is trying to remove Most design systems force a choice. Adopt a large company’s system and your app tends to look like someone else’s product. Reach for copy-paste components instead and every project forks its own snippets, with no shared coherence, no upstream fixes, and accessibility quietly becoming your problem. Astryx separates the two concerns. The system controls behavior, accessibility, and quality. Themes control how it looks. You customize at the token level (color, type, radius, motion) so the app becomes unmistakably yours without rewrites. A theme is simply a set of CSS custom property overrides, so a designer can retheme Astryx without forking or wrapping component source. Its stated design principles are guidance over enforcement, strong documented conventions, one system for humans and AI, and earned by measurement — conventions are tested, not asserted. Architecture: foundations, components, patterns Astryx is organized in three layers. Foundations are the primitives for cohesive, accessible interfaces: typography, color, layout, and accessibility. Components are the 150+ reusable building blocks, all with full TypeScript support. Patterns are battle-tested solutions for common workflows: table pages, detail layouts, form wizards, navigation, and data-entry flows. Two design decisions make it unusually open. Components are composed at any level rather than locked behind a closed top-level API, and swizzle can eject a component’s full source into your project when you need to own it. Styling is created with StyleX but stays invisible to consumers, so you can override with className using Tailwind, CSS modules, or plain CSS — whatever the project already uses. The explainer below shows how one set of components restyles across Astryx’s seven shipped themes when only the tokens change. Astryx Explainer — Marktechpost /* ===== Marktechpost · Astryx Interactive Explainer (LIGHT THEME) ===== */ #mtp-ax-explainer *{box-sizing:border-box;margin:0;padding:0} #mtp-ax-explainer{ --ink:#16181D; --ink-2:#5A6270; --ink-3:#8A9099; --line:#E6E8EC; --paper:#FFFFFF; --tint:#F6F7F9; --brand:#1657E0; --brand-ink:#0B3AA8; --ok:#16A34A; --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; --sans:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.5; -webkit-font-smoothing:antialiased; border:1px solid var(--line); border-radius:16px; overflow:hidden; max-width:900px; margin:0 auto; } #mtp-ax-explainer .ax-head{padding:22px 24px 18px;border-bottom:1px solid var(--line);background: linear-gradient(180deg,#FBFCFE,#FFFFFF)} #mtp-ax-explainer .ax-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:8px} #mtp-ax-explainer .ax-eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px} #mtp-ax-explainer h2.ax-title{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:10px 0 4px;font-weight:700} #mtp-ax-explainer .ax-sub{c