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.

/* ===== 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{color:var(–ink-2);font-size:14px;max-width:60ch}

/* stat band */
#mtp-ax-explainer .ax-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(–line);
border-bottom:1px solid var(–line)}
#mtp-ax-explainer .ax-stat{background:var(–paper);padding:14px 12px;text-align:center}
#mtp-ax-explainer .ax-stat b{display:block;font-size:20px;letter-spacing:-.02em;font-weight:700;color:var(–ink)}
#mtp-ax-explainer .ax-stat span{display:block;font-family:var(–mono);font-size:10px;letter-spacing:.06em;
text-transform:uppercase;color:var(–ink-3);margin-top:3px}

#mtp-ax-explainer .ax-body{padding:22px 24px 8px}
#mtp-ax-explainer .ax-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}

/* controls */
#mtp-ax-explainer .ax-panel h3{font-size:12px;font-family:var(–mono);letter-spacing:.08em;text-transform:uppercase;
color:var(–ink-2);margin-bottom:10px;font-weight:600}
#mtp-ax-explainer .ax-themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#mtp-ax-explainer .ax-chip{cursor:pointer;border:1px solid var(–line);background:var(–paper);
border-radius:999px;padding:6px 12px 6px 8px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;
transition:border-color .15s,box-shadow .15s,transform .06s;color:var(–ink)}
#mtp-ax-explainer .ax-chip:hover{border-color:#C9CED6}
#mtp-ax-explainer .ax-chip .dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#mtp-ax-explainer .ax-chip[aria-pressed=”true”]{border-color:var(–brand);
box-shadow:0 0 0 3px rgba(22,87,224,.12)}
#mtp-ax-explainer .ax-chip:focus-visible{outline:2px solid var(–brand);outline-offset:2px}

#mtp-ax-explainer .ax-sliders{display:grid;gap:14px;margin-bottom:16px}
#mtp-ax-explainer .ax-slider label{display:flex;justify-content:space-between;font-size:13px;color:var(–ink-2);margin-bottom:6px}
#mtp-ax-explainer .ax-slider label b{font-family:var(–mono);color:var(–ink);font-weight:600}
#mtp-ax-explainer input[type=range]{width:100%;accent-color:var(–brand);height:4px;cursor:pointer}
#mtp-ax-explainer .ax-toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(–ink-2);cursor:pointer;user-select:none}
#mtp-ax-explainer .ax-sw{width:38px;height:22px;border-radius:999px;background:#D5D9E0;position:relative;transition:background .18s}
#mtp-ax-explainer .ax-sw::after{content:””;position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s}
#mtp-ax-explainer .ax-toggle[aria-pressed=”true”] .ax-sw{background:var(–brand)}
#mtp-ax-explainer .ax-toggle[aria-pressed=”true”] .ax-sw::after{transform:translateX(16px)}

/* tokens readout */
#mtp-ax-explainer .ax-tokenbtn{margin-top:6px;font-family:var(–mono);font-size:12px;color:var(–brand);
background:none;border:none;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
#mtp-ax-explainer .ax-tokens{margin-top:10px;background:#0E1116;border-radius:10px;padding:12px 14px;
font-family:var(–mono);font-size:12px;line-height:1.7;color:#C9D3E0;display:none;overflow-x:auto}
#mtp-ax-explainer .ax-tokens.show{display:block}
#mtp-ax-explainer .ax-tokens .k{color:#7FA6FF}
#mtp-ax-explainer .ax-tokens .v{color:#89E0B0}

/* live preview device */
#mtp-ax-explainer .ax-previewwrap{position:sticky;top:8px}
#mtp-ax-explainer .ax-device{border:1px solid var(–pv-line,#E6E8EC);border-radius:calc(var(–pv-radius,10px) + 6px);
background:var(–pv-bg,#fff);padding:16px;transition:background .25s,border-color .25s,border-radius .25s;
box-shadow:0 10px 30px -18px rgba(16,24,40,.35)}
#mtp-ax-explainer .ax-devbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#mtp-ax-explainer .ax-devdots{display:flex;gap:5px}
#mtp-ax-explainer .ax-devdots i{width:8px;height:8px;border-radius:50%;background:var(–pv-line,#E6E8EC);display:block}
#mtp-ax-explainer .ax-devtag{font-family:var(–mono);font-size:10px;color:var(–pv-muted,#8A9099);letter-spacing:.05em}
#mtp-ax-explainer .ax-card{background:var(–pv-surface,#F4F4F5);border:1px solid var(–pv-line,#E6E8EC);
border-radius:var(–pv-radius,10px);overflow:hidden;transition:all .25s}
#mtp-ax-explainer .ax-thumb{height:96px;background:
linear-gradient(135deg,var(–pv-primary,#18181B),color-mix(in srgb,var(–pv-primary,#18181B) 55%,#ffffff));
position:relative}
#mtp-ax-explainer .ax-badge{position:absolute;top:10px;left:10px;background:var(–pv-bg,#fff);color:var(–pv-primary,#18181B);
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
#mtp-ax-explainer .ax-cardbody{padding:var(–pv-pad,14px)}
#mtp-ax-explainer .ax-cardbody h4{color:var(–pv-text,#18181B);font-size:15px;font-weight:700;margin-bottom:2px}
#mtp-ax-explainer .ax-cardbody p{color:var(–pv-muted,#6B7280);font-size:12.5px;margin-bottom:12px}
#mtp-ax-explainer .ax-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
#mtp-ax-explainer .ax-price{color:var(–pv-text,#18181B);font-weight:700;font-size:15px}
#mtp-ax-explainer .ax-input{flex:1;border:1px solid var(–pv-line,#E6E8EC);background:var(–pv-bg,#fff);
border-radius:calc(var(–pv-radius,10px) – 2px);padding:8px 10px;font-size:12.5px;color:var(–pv-text,#18181B);min-width:0}
#mtp-ax-explainer .ax-input::placeholder{color:var(–pv-muted,#9AA0AA)}
#mtp-ax-explainer .ax-btn{background:var(–pv-primary,#18181B);color:var(–pv-onprimary,#fff);border:none;
border-radius:calc(var(–pv-radius,10px) – 2px);padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;
font-family:var(–sans);white-space:nowrap;transition:filter .15s}
#mtp-ax-explainer .ax-btn:hover{filter:brightness(.94)}
#mtp-ax-explainer .ax-btn.ghost{background:transparent;color:var(–pv-primary,#18181B);
box-shadow:inset 0 0 0 1px var(–pv-primary,#18181B)}
#mtp-ax-explainer .ax-mini{display:flex;align-items:center;gap:8px;color:var(–pv-muted,#6B7280);font-size:12px}
#mtp-ax-explainer .ax-miniSw{width:32px;height:19px;border-radius:999px;background:var(–pv-primary,#18181B);position:relative;flex:none}
#mtp-ax-explainer .ax-miniSw::after{content:””;position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:var(–pv-bg,#fff)}
#mtp-ax-explainer .ax-caption{margin-top:10px;font-size:11.5px;color:var(–ink-3);text-align:center;font-style:italic}

/* architecture */
#mtp-ax-explainer .ax-arch{margin:6px 24px 4px;border-top:1px solid var(–line);padding-top:18px}
#mtp-ax-explainer .ax-arch h3{font-size:12px;font-family:var(–mono);letter-spacing:.08em;text-transform:uppercase;color:var(–ink-2);margin-bottom:12px;font-weight:600}
#mtp-ax-explainer .ax-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#mtp-ax-explainer .ax-layer{cursor:pointer;border:1px solid var(–line);border-radius:12px;padding:14px;background:var(–tint);
transition:border-color .15s,background .15s;text-align:left}
#mtp-ax-explainer .ax-layer:hover{border-color:#C9CED6}
#mtp-ax-explainer .ax-layer[aria-expanded=”true”]{border-color:var(–brand);background:#fff;box-shadow:0 0 0 3px rgba(22,87,224,.1)}
#mtp-ax-explainer .ax-layer .n{font-family:var(–mono);font-size:11px;color:var(–brand);font-weight:600}
#mtp-ax-explainer .ax-layer b{display:block;font-size:14px;margin:4px 0 0}
#mtp-ax-explainer .ax-layer .desc{font-size:12.5px;color:var(–ink-2);margin-top:8px;max-height:0;overflow:hidden;transition:max-height .25s;line-height:1.5}
#mtp-ax-explainer .ax-layer[aria-expanded=”true”] .desc{max-height:120px}

/* footer */
#mtp-ax-explainer .ax-foot{margin-top:16px;border-top:1px solid var(–line);padding:12px 24px;
display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(–tint);flex-wrap:wrap}
#mtp-ax-explainer .ax-foot a{color:var(–brand);text-decoration:none;font-weight:600}
#mtp-ax-explainer .ax-foot a:hover{text-decoration:underline}
#mtp-ax-explainer .ax-brand{font-size:11.5px;color:var(–ink-3)}
#mtp-ax-explainer .ax-brand b{color:#0B8A00;font-weight:700}

@media (max-width:680px){
#mtp-ax-explainer .ax-grid{grid-template-columns:1fr}
#mtp-ax-explainer .ax-stats{grid-template-columns:repeat(3,1fr)}
#mtp-ax-explainer .ax-layers{grid-template-columns:1fr}
#mtp-ax-explainer .ax-previewwrap{position:static}
}
@media (prefers-reduced-motion:reduce){#mtp-ax-explainer *{transition:none!important}}

(function(){
var root=document.getElementById(‘mtp-ax-explainer’);
// Representative token sets that mirror Astryx’s seven shipped themes.
var THEMES={
neutral:{label:’neutral’,primary:’#18181B’,onp:’#ffffff’,bg:’#ffffff’,surface:’#F4F4F5′,text:’#18181B’,muted:’#6B7280′,line:’#E4E4E7′,radius:10,dot:’#18181B’},
butter:{label:’butter’,primary:’#B7791F’,onp:’#ffffff’,bg:’#FFFEF6′,surface:’#FEF7C7′,text:’#422006′,muted:’#8A6D2F’,line:’#F3E4A8′,radius:16,dot:’#EAB308′},
chocolate:{label:’chocolate’,primary:’#7C4A2D’,onp:’#ffffff’,bg:’#FBF7F4′,surface:’#EFE3D8′,text:’#3B241A’,muted:’#8A6B58′,line:’#E3D2C4′,radius:6,dot:’#7C4A2D’},
matcha:{label:’matcha’,primary:’#3F7A3F’,onp:’#ffffff’,bg:’#F7FAF4′,surface:’#E6F0DF’,text:’#233620′,muted:’#5C7A55′,line:’#D4E4CB’,radius:12,dot:’#4E9A4E’},
stone:{label:’stone’,primary:’#475569′,onp:’#ffffff’,bg:’#FAFAFB’,surface:’#EEF0F3′,text:’#1F2937′,muted:’#64748B’,line:’#E2E6EC’,radius:8,dot:’#64748B’},
gothic:{label:’gothic’,primary:’#111111′,onp:’#ffffff’,bg:’#ffffff’,surface:’#ECECEC’,text:’#111111′,muted:’#555555′,line:’#111111′,radius:2,dot:’#111111′},
y2k:{label:’y2k’,primary:’#C026D3′,onp:’#ffffff’,bg:’#FBF4FF’,surface:’#FBE4FF’,text:’#4A044E’,muted:’#8B3FA0′,line:’#F0C7FA’,radius:22,dot:’#C026D3′}
};
var order=[‘neutral’,’butter’,’chocolate’,’matcha’,’stone’,’gothic’,’y2k’];
var current=’neutral’, dark=false;
var device=document.getElementById(‘axDevice’);
var devtag=document.getElementById(‘axDevTag’);
var tokensEl=document.getElementById(‘axTokens’);
var radius=document.getElementById(‘axRadius’), pad=document.getElementById(‘axPad’);
var radiusV=document.getElementById(‘axRadiusV’), padV=document.getElementById(‘axPadV’);

// build theme chips
var wrap=document.getElementById(‘axThemes’);
order.forEach(function(key){
var t=THEMES[key];
var b=document.createElement(‘button’);
b.className=’ax-chip’; b.type=’button’;
b.setAttribute(‘aria-pressed’, key===current?’true’:’false’);
b.innerHTML=’‘+t.label;
b.addEventListener(‘click’,function(){ current=key; radius.value=t.radius; sync(); });
wrap.appendChild(b);
});

function darken(hex,amt){ // mix hex toward black
var c=hex.replace(‘#’,”); var n=parseInt(c,16);
var r=(n>>16)&255,g=(n>>8)&255,bl=n&255;
r=Math.round(r*(1-amt)); g=Math.round(g*(1-amt)); bl=Math.round(bl*(1-amt));
return ‘rgb(‘+r+’,’+g+’,’+bl+’)’;
}
function sync(){
var t=THEMES[current];
radiusV.textContent=radius.value; padV.textContent=pad.value;
var s=device.style;
var bg = dark? ‘#15171C’ : t.bg;
var surface = dark? ‘#20242C’ : t.surface;
var text = dark? ‘#F4F5F7’ : t.text;
var muted = dark? ‘#A2AAB6’ : t.muted;
var line = dark? ‘#2C313B’ : t.line;
s.setProperty(‘–pv-bg’,bg);
s.setProperty(‘–pv-surface’,surface);
s.setProperty(‘–pv-text’,text);
s.setProperty(‘–pv-muted’,muted);
s.setProperty(‘–pv-line’,line);
s.setProperty(‘–pv-primary’,t.primary);
s.setProperty(‘–pv-onprimary’,t.onp);
s.setProperty(‘–pv-radius’,radius.value+’px’);
s.setProperty(‘–pv-pad’,pad.value+’px’);
devtag.textContent=’theme: ‘+t.label+(dark?’ · dark’:”);
// chips
Array.prototype.forEach.call(wrap.children,function(ch,i){
ch.setAttribute(‘aria-pressed’, order[i]===current?’true’:’false’);
});
// tokens readout
tokensEl.innerHTML=
‘–color-primary: ‘+t.primary+’;n’+
‘–color-background: ‘+bg+’;n’+
‘–color-surface: ‘+surface+’;n’+
‘–color-text-primary: ‘+text+’;n’+
‘–radius-container: ‘+radius.value+’px;n’+
‘–spacing-pad: ‘+pad.value+’px;n’+
‘–color-scheme: ‘+(dark?’dark’:’light’)+’;’;
}
radius.addEventListener(‘input’,sync);
pad.addEventListener(‘input’,sync);
var darkBtn=document.getElementById(‘axDark’);
darkBtn.addEventListener(‘click’,function(){ dark=!dark; darkBtn.setAttribute(‘aria-pressed’,dark?’true’:’false’); sync(); });
var tokBtn=document.getElementById(‘axTokBtn’);
tokBtn.addEventListener(‘click’,function(){
var open=tokensEl.classList.toggle(‘show’);
tokBtn.setAttribute(‘aria-expanded’,open?’true’:’false’);
tokBtn.textContent=(open?’▾’:’▸’)+’ ‘+(open?’Hide the tokens this theme sets’:’Show the tokens this theme sets’);
});

// architecture accordion
var layers=document.querySelectorAll(‘#axLayers .ax-layer’);
layers.forEach(function(l){
l.querySelector(‘.desc’).textContent=l.getAttribute(‘data-desc’);
l.addEventListener(‘click’,function(){
var open=l.getAttribute(‘aria-expanded’)===’true’;
layers.forEach(function(x){x.setAttribute(‘aria-expanded’,’false’);});
l.setAttribute(‘aria-expanded’, open?’false’:’true’);
});
});

// count-up stats
var reduce=window.matchMedia&&window.matchMedia(‘(prefers-reduced-motion:reduce)’).matches;
function countUp(el){
var target=+el.getAttribute(‘data-count’), suffix=el.getAttribute(‘data-suffix’)||”;
if(reduce){ el.textContent=target.toLocaleString()+suffix; return; }
var start=null,dur=900;
function step(ts){ if(!start)start=ts; var p=Math.min((ts-start)/dur,1);
var val=Math.floor((1-Math.pow(1-p,3))*target);
el.textContent=val.toLocaleString()+suffix; if(p<1)requestAnimationFrame(step); }
requestAnimationFrame(step);
}
var counted=false;
function maybeCount(){ if(counted)return; var r=root.getBoundingClientRect();
if(r.top0){ counted=true;
document.querySelectorAll(‘#axStats b[data-count]’).forEach(countUp); } }
window.addEventListener(‘scroll’,maybeCount,{passive:true}); maybeCount();

sync();

// WordPress auto-resize: post this component’s own height (never scrollHeight of documentElement)
function postHeight(){
var h=root.offsetHeight+40;
if(window.parent){ window.parent.postMessage({type:’astryx-explainer-height’,height:h},’*’); }
}
window.addEventListener(‘load’,postHeight);
window.addEventListener(‘resize’,postHeight);
new (window.ResizeObserver||function(){this.observe=function(){};})(postHeight).observe(root);
setTimeout(postHeight,300);
})();

Built for agents, not retrofitted for them

Meta frames Astryx as a response to how software is now written. As more code is produced by agents, the argument goes, design systems have to be rethought rather than patched. The API, conventions, docs, and CLI were designed together, so a person and an AI assistant build the same way from the same reference. Every change that made Astryx easier for AI, the team notes, made it easier for people too.

That shows up in the tooling. The CLI (@astryxdesign/cli) can list and scaffold templates, print full component docs, generate and build themes, run codemods to migrate versions, and surface machine-readable docs from the command line or over MCP. Components ship with consistent naming, prop, and composition rules, so once you learn a few, both people and models can predict how an unfamiliar one behaves.

Requirements and how to deploy it

Because Astryx is a front-end library, ‘deploying’ it means adding it to a React app. The package (@astryxdesign/core, referred to internally as XDS) lists React and react-dom ≥ 19.0.0 as peer dependencies, alongside StyleX. It ships pre-built CSS, so there is no PostCSS or Babel configuration to add. Supported setups include Next.js with Tailwind, Next.js with StyleX, Vite, and a no-build CDN path via the UMD bundle on unpkg or jsDelivr. The interactive checker below generates the exact install and setup steps for your stack and flags anything that needs to change first.

/* ===== Marktechpost · “Can I ship Astryx?” checker (LIGHT THEME) ===== */
#mtp-ax-deploy *{box-sizing:border-box;margin:0;padding:0}
#mtp-ax-deploy{
–ink:#16181D; –ink-2:#5A6270; –ink-3:#8A9099;
–line:#E6E8EC; –paper:#FFFFFF; –tint:#F6F7F9;
–brand:#1657E0; –ok:#16A34A; –ok-bg:#ECFDF3; –ok-line:#ABEFC6;
–warn:#B45309; –warn-bg:#FFFAEB; –warn-line:#FEDF89;
–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-deploy .dp-head{padding:22px 24px 18px;border-bottom:1px solid var(–line);
background:linear-gradient(180deg,#FBFCFE,#FFFFFF)}
#mtp-ax-deploy .dp-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-deploy .dp-eyebrow::before{content:””;width:22px;height:2px;background:var(–brand);border-radius:2px}
#mtp-ax-deploy h2.dp-title{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:10px 0 4px;font-weight:700}
#mtp-ax-deploy .dp-sub{color:var(–ink-2);font-size:14px;max-width:62ch}

#mtp-ax-deploy .dp-body{padding:20px 24px}
#mtp-ax-deploy .dp-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start}

#mtp-ax-deploy .dp-q{margin-bottom:16px}
#mtp-ax-deploy .dp-q h3{font-size:12px;font-family:var(–mono);letter-spacing:.07em;text-transform:uppercase;
color:var(–ink-2);margin-bottom:8px;font-weight:600}
#mtp-ax-deploy .dp-opts{display:flex;flex-wrap:wrap;gap:7px}
#mtp-ax-deploy .dp-opt{cursor:pointer;border:1px solid var(–line);background:var(–paper);border-radius:9px;
padding:8px 12px;font-size:13px;font-weight:500;color:var(–ink);transition:border-color .13s,box-shadow .13s}
#mtp-ax-deploy .dp-opt:hover{border-color:#C9CED6}
#mtp-ax-deploy .dp-opt[aria-pressed=”true”]{border-color:var(–brand);box-shadow:0 0 0 3px rgba(22,87,224,.12);
background:#F5F8FF}
#mtp-ax-deploy .dp-opt:focus-visible{outline:2px solid var(–brand);outline-offset:2px}

/* verdict */
#mtp-ax-deploy .dp-verdict{border-radius:14px;padding:16px 18px;border:1px solid var(–ok-line);background:var(–ok-bg);
display:flex;gap:14px;align-items:flex-start;transition:all .2s}
#mtp-ax-deploy .dp-verdict.warn{border-color:var(–warn-line);background:var(–warn-bg)}
#mtp-ax-deploy .dp-vicon{width:34px;height:34px;border-radius:50%;background:var(–ok);color:#fff;flex:none;
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
#mtp-ax-deploy .dp-verdict.warn .dp-vicon{background:var(–warn)}
#mtp-ax-deploy .dp-vtitle{font-size:16px;font-weight:700;letter-spacing:-.01em}
#mtp-ax-deploy .dp-vtext{font-size:13px;color:var(–ink-2);margin-top:3px}
#mtp-ax-deploy .dp-verdict.warn .dp-vtitle{color:var(–warn)}

/* requirements checklist */
#mtp-ax-deploy .dp-req{margin-top:16px;border:1px solid var(–line);border-radius:12px;overflow:hidden}
#mtp-ax-deploy .dp-reqrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(–line);font-size:13px}
#mtp-ax-deploy .dp-reqrow:last-child{border-bottom:none}
#mtp-ax-deploy .dp-reqrow .ico{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(–ok)}
#mtp-ax-deploy .dp-reqrow.no .ico{background:var(–warn)}
#mtp-ax-deploy .dp-reqrow b{font-weight:600}
#mtp-ax-deploy .dp-reqrow span{color:var(–ink-3);margin-left:auto;font-family:var(–mono);font-size:11px;text-align:right}

/* install block */
#mtp-ax-deploy .dp-install{margin-top:16px}
#mtp-ax-deploy .dp-installhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#mtp-ax-deploy .dp-installhead h3{font-size:12px;font-family:var(–mono);letter-spacing:.07em;text-transform:uppercase;color:var(–ink-2);font-weight:600}
#mtp-ax-deploy .dp-copy{font-family:var(–mono);font-size:11px;color:var(–brand);background:#F0F5FF;border:1px solid #D7E4FF;
border-radius:7px;padding:5px 10px;cursor:pointer;font-weight:600}
#mtp-ax-deploy .dp-copy.done{color:var(–ok);background:var(–ok-bg);border-color:var(–ok-line)}
#mtp-ax-deploy pre.dp-code{background:#0E1116;border-radius:12px;padding:16px;overflow-x:auto;
font-family:var(–mono);font-size:12.5px;line-height:1.75;color:#D7DEE8;white-space:pre}
#mtp-ax-deploy pre.dp-code .c{color:#6B7686}
#mtp-ax-deploy pre.dp-code .g{color:#89E0B0}
#mtp-ax-deploy pre.dp-code .b{color:#7FA6FF}
#mtp-ax-deploy .dp-step{font-family:var(–mono);font-size:11px;color:var(–brand);margin:14px 0 6px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}

/* metrics strip */
#mtp-ax-deploy .dp-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(–line);
border-top:1px solid var(–line);border-bottom:1px solid var(–line)}
#mtp-ax-deploy .dp-metric{background:var(–paper);padding:14px 12px;text-align:center}
#mtp-ax-deploy .dp-metric b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
#mtp-ax-deploy .dp-metric span{display:block;font-family:var(–mono);font-size:10px;letter-spacing:.05em;
text-transform:uppercase;color:var(–ink-3);margin-top:4px}

#mtp-ax-deploy .dp-foot{padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(–tint);flex-wrap:wrap}
#mtp-ax-deploy .dp-foot a{color:var(–brand);text-decoration:none;font-weight:600}
#mtp-ax-deploy .dp-foot a:hover{text-decoration:underline}
#mtp-ax-deploy .dp-brand{font-size:11.5px;color:var(–ink-3)}
#mtp-ax-deploy .dp-brand b{color:#0B8A00;font-weight:700}

@media (max-width:680px){
#mtp-ax-deploy .dp-grid{grid-template-columns:1fr}
#mtp-ax-deploy .dp-metrics{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){#mtp-ax-deploy *{transition:none!important}}

(function(){
var root=document.getElementById(‘mtp-ax-deploy’);
var state={fw:’next-tw’,react:’19’,pm:’npm’,use:’comm’};

document.querySelectorAll(‘#mtp-ax-deploy .dp-opts’).forEach(function(group){
var key=group.getAttribute(‘data-group’);
group.querySelectorAll(‘.dp-opt’).forEach(function(btn){
btn.addEventListener(‘click’,function(){
group.querySelectorAll(‘.dp-opt’).forEach(function(b){b.setAttribute(‘aria-pressed’,’false’);});
btn.setAttribute(‘aria-pressed’,’true’);
state[key]=btn.getAttribute(‘data-v’);
render();
});
});
});

var addCmd={npm:’npm install’,pnpm:’pnpm add’,yarn:’yarn add’};
var addDev={npm:’npm install -D’,pnpm:’pnpm add -D’,yarn:’yarn add -D’};

function esc(s){return s.replace(/&/g,’&’).replace(//g,’>’);}

function render(){
var v=document.getElementById(‘dpVerdict’);
var vIcon=document.getElementById(‘dpVIcon’);
var vTitle=document.getElementById(‘dpVTitle’);
var vText=document.getElementById(‘dpVText’);
var warn = state.react===’18’;

if(warn){
v.classList.add(‘warn’); vIcon.textContent=’!’;
vTitle.textContent=’One change needed first’;
vText.textContent=’Astryx lists React and react-dom u226519.0.0 as peer dependencies. Upgrade to React 19, then you are clear to ship.’;
}else{
v.classList.remove(‘warn’); vIcon.textContent=’u2713′;
vTitle.textContent=’Clear to ship’;
vText.textContent=(state.fw===’cdn’)
? ‘Drop the UMD bundle in via a tag from a CDN — no build step at all.’
: ‘Your stack is supported out of the box. Install, import the CSS, wrap your app in the theme provider, and go.’;
}

// requirements checklist
var reqs=[
{ok:state.react===’19’, label:’React 19+ / react-dom 19+’, note:’peer dependency’},
{ok:true, label:’StyleX (authored, invisible to you)’, note:’@stylexjs/stylex ^0.19′},
{ok:true, label:’No build plugin required’, note:’ships pre-built CSS’},
{ok:true, label:’MIT license’, note: state.use===’comm’?’commercial OK’:’OSS OK’},
{ok:true, label: state.fw===’cdn’?’Modern browser (ES modules)’:’Modern Node + bundler’, note: state.fw===’cdn’?’unpkg / jsDelivr’:’Next.js / Vite’}
];
var reqEl=document.getElementById(‘dpReq’);
reqEl.innerHTML=reqs.map(function(r){
return ‘

‘;
}).join(”);

// install / setup code, tailored to the framework
var add=addCmd[state.pm], dev=addDev[state.pm];
var code=”;
if(state.fw===’cdn’){
code=
‘# No install — load the UMD build + a theme from a CDNn’+
‘<link rel=”stylesheet”n’+
‘ href=”https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css”>n’+
‘<script src=”https://unpkg.com/@astryxdesign/core”></script>nn’+
‘# Then use components against the global build.n’+
‘# Great for prototypes; use the npm packages for real apps.‘;
} else {
var theme=’@astryxdesign/theme-neutral‘;
code=
‘# 1 · install core, a theme, and the CLIn’+
add+’ @astryxdesign/core ‘+theme+’n’+
dev+’ @astryxdesign/clinn’;
if(state.fw===’next-tw’){
code+=
‘# 2 · globals.css — import pre-built CSS (works with Tailwind)n’+
‘@import ‘@astryxdesign/core/reset.css’;n’+
‘@import ‘@astryxdesign/core/astryx.css’;n’+
‘@import ‘@astryxdesign/theme-neutral/theme.css’;n’+
‘@import ‘@astryxdesign/core/tailwind-theme.css’; # token bridgenn’;
} else if(state.fw===’next-sx’){
code+=
‘# 2 · globals.css — import pre-built CSS (StyleX for your own styles)n’+
‘@import ‘@astryxdesign/core/reset.css’;n’+
‘@import ‘@astryxdesign/core/astryx.css’;n’+
‘@import ‘@astryxdesign/theme-neutral/theme.css’;nn’;
} else {
code+=
‘# 2 · import the same pre-built CSS in your entry filen’+
‘import ‘@astryxdesign/core/reset.css’;n’+
‘import ‘@astryxdesign/core/astryx.css’;n’+
‘import ‘@astryxdesign/theme-neutral/theme.css’;nn’;
}
code+=
‘# 3 · wrap the app in the theme providern’+
‘import {Theme} from ‘@astryxdesign/core/theme’;n’+
‘import {neutralTheme} from ‘@astryxdesign/theme-neutral/built’;n’+
‘<Theme theme={neutralTheme}>{children}</Theme>nn’+
‘# 4 · ship a componentn’+
‘import {Button} from ‘@astryxdesign/core/Button’;n’+
‘<Button label=”Hello XDS” variant=”primary” />’;
}
document.getElementById(‘dpCode’).innerHTML=code;

// plain-text version for clipboard
root._copyText=document.getElementById(‘dpCode’).textContent;
}

document.getElementById(‘dpCopy’).addEventListener(‘click’,function(){
var btn=this, txt=root._copyText||”;
function done(){ btn.classList.add(‘done’); btn.textContent=’Copied u2713′;
setTimeout(function(){btn.classList.remove(‘done’);btn.textContent=’Copy install’;},1600); }
if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(txt).then(done,done); }
else { var ta=document.createElement(‘textarea’); ta.value=txt; document.body.appendChild(ta);
ta.select(); try{document.execCommand(‘copy’);}catch(e){} document.body.removeChild(ta); done(); }
});

render();

// WordPress auto-resize
function postHeight(){ var h=root.offsetHeight+40;
if(window.parent){ window.parent.postMessage({type:’astryx-deploy-height’,height:h},’*’); } }
window.addEventListener(‘load’,postHeight);
window.addEventListener(‘resize’,postHeight);
new (window.ResizeObserver||function(){this.observe=function(){};})(postHeight).observe(root);
setTimeout(postHeight,300);
})();

Key takeaways

• Astryx is Meta’s largest internal design system, now open source under MIT.
• 150+ accessible React components, seven themes, dark mode, templates, and a CLI.
• Behavior and accessibility live in the system; look lives in CSS-token themes.
• Built agent-first: one API, docs, and CLI (plus MCP) for humans and AI alike.
• Requires React 19+; ships pre-built CSS with no build plugin, and is currently Beta.

Sources: astryx.atmeta.com and github.com/facebook/astryx

The post Meta Open-Sources Astryx: An Agent-Ready React Design System With 150+ Accessible Components, Seven Themes, and a CLI appeared first on MarkTechPost.