[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-astryx-open-source-meta-design-system-en":3,"article-related-astryx-open-source-meta-design-system-en":31,"series-tools-3792cfcc-d13d-4fbc-95ca-108c3b49a6c6":78},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":23,"views":27,"created_at":28,"published_at":29,"topic_cluster_id":30},"3792cfcc-d13d-4fbc-95ca-108c3b49a6c6","astryx-open-source-meta-design-system-en","Astryx open-sources Meta’s 13,000-app design system","\u003Cp data-speakable=\"summary\">\u003Ca href=\"\u002Ftag\u002Fmeta\">Meta\u003C\u002Fa> has open-sourced Astryx, a React and StyleX design system built for people and \u003Ca href=\"\u002Ftag\u002Fai-agents\">AI agents\u003C\u002Fa>.\u003C\u002Fp>\u003Cp>Meta has published \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx\" target=\"_blank\" rel=\"noopener\">Astryx\u003C\u002Fa>, an open source design system that the company says grew over eight years and now powers 13,000+ apps. The project is in beta, built on React and StyleX, and packages its components, themes, and CLI into one toolkit.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>數值\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Apps powered inside Meta\u003C\u002Ftd>\u003Ctd>13,000+\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Components\u003C\u002Ftd>\u003Ctd>150+\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Themes\u003C\u002Ftd>\u003Ctd>7\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>GitHub stars\u003C\u002Ftd>\u003Ctd>1.6k\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Forks\u003C\u002Ftd>\u003Ctd>88\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Recent release\u003C\u002Ftd>\u003Ctd>v0.1.2 on Jun 29, 2026\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>What changed\u003C\u002Fh2>\u003Cp>Astryx is now public on \u003Ca href=\"\u002Ftag\u002Fgithub\">GitHub\u003C\u002Fa> under the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx\" target=\"_blank\" rel=\"noopener\">facebook\u002Fastryx\u003C\u002Fa> repository. The project includes typed React components, brand-level theming, dark mode, templates, and a CLI that can scaffold components and themes.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842569018-z637.png\" alt=\"Astryx open-sources Meta’s 13,000-app design system\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>The repo description says the system is “fully customizable” and “\u003Ca href=\"\u002Ftag\u002Fagent\">agent\u003C\u002Fa> ready.” Its docs emphasize that the same API and CLI are meant to work for developers and AI assistants, so both can build from the same reference.\u003C\u002Fp>\u003Cul>\u003Cli>Built on React and StyleX\u003C\u002Fli>\u003Cli>150+ accessible components\u003C\u002Fli>\u003Cli>Seven themes: neutral, butter, chocolate, matcha, stone, gothic, y2k\u003C\u002Fli>\u003Cli>No build plugin required for basic use\u003C\u002Fli>\u003Cli>Source is open under the MIT license\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Meta also says Astryx avoids styling lock-in. Consumers can override styles with className, use Tailwind, CSS modules, or plain CSS, and customize themes through CSS custom property overrides instead of wrapping or forking components.\u003C\u002Fp>\u003Ch2>Why it matters\u003C\u002Fh2>\u003Cp>For teams building design systems, Astryx is a concrete reference for how to ship a large internal UI kit as public infrastructure without forcing a new styling stack. The repo pairs component code with docs, codemods, templates, and build tooling, which lowers the setup cost for teams that want a predictable system.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842569127-1hq9.png\" alt=\"Astryx open-sources Meta’s 13,000-app design system\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>It also gives \u003Ca href=\"\u002Ftag\u002Fai-coding-tools\">AI coding tools\u003C\u002Fa> a clearer target. Because the docs, API, and CLI are aligned, assistants can generate or modify UI using the same patterns humans follow, which may reduce drift between generated code and hand-written code.\u003C\u002Fp>\u003Cp>For Meta, the release turns an internal standard into a public package that other React teams can evaluate, fork, or adapt. For the broader market, it adds another open design-system option focused on composability and agent workflows rather than strict visual guardrails.\u003C\u002Fp>\u003Cp>The real question now is whether Astryx becomes a reference point for AI-assisted UI work, or just another well-documented design system with a big internal pedigree.\u003C\u002Fp>","Meta open-sources Astryx, its React and StyleX design system with 150+ components, 7 themes, and CLI tools built for people and AI agents.","github.com","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842569018-z637.png","tools","en","f1187152-abac-4641-93ae-0df5c3f81e12",[17,18,19,20,21,22],"Astryx","Meta","design system","React","StyleX","AI agents",[24,25,26],"Meta open-sourced Astryx after eight years of internal use across 13,000+ apps.","The system ships 150+ components, seven themes, and CLI tooling for scaffolding and docs.","Astryx is designed so developers and AI assistants can follow the same workflow.",0,"2026-06-30T18:02:23.745876+00:00","2026-06-30T18:02:23.738+00:00","a7343b93-37cc-4634-a2bc-707f6275bdb6",{"tags":32,"relatedLang":37,"relatedPosts":41},[33,35],{"name":20,"slug":34},"react",{"name":18,"slug":36},"meta",{"id":15,"slug":38,"title":39,"language":40},"astryx-open-source-meta-design-system-zh","Meta 開源 Astryx 設計系統","zh",[42,48,54,60,66,72],{"id":43,"slug":44,"title":45,"cover_image":46,"image_url":46,"created_at":47,"category":13},"b80a992a-5a52-4dd1-b1ac-c38de13148bd","system-design-learning-path-from-scratch-en","System design finally clicks with one learning path","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782849802024-87dg.png","2026-06-30T20:02:57.118423+00:00",{"id":49,"slug":50,"title":51,"cover_image":52,"image_url":52,"created_at":53,"category":13},"a222c263-83e5-49b2-a2b6-a2871c40ac7d","googles-gemini-live-camera-editing-right-move-en","Google’s Gemini Live camera editing is the right move","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782838969949-g3oj.png","2026-06-30T17:02:20.6458+00:00",{"id":55,"slug":56,"title":57,"cover_image":58,"image_url":58,"created_at":59,"category":13},"699d126b-46d9-4fa9-9000-9287f1fb6f15","manus-ai-pricing-2026-plans-credits-costs-en","Manus AI Pricing 2026: Plans, Credits, Costs","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782835377687-5jrt.png","2026-06-30T16:02:29.338222+00:00",{"id":61,"slug":62,"title":63,"cover_image":64,"image_url":64,"created_at":65,"category":13},"bf330454-e98e-4c15-ad75-1dfe0b1158bc","base44-rolls-out-own-ai-model-en","$150M ARR Base44 rolls out its own AI model","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782832674318-ejld.png","2026-06-30T15:17:29.087664+00:00",{"id":67,"slug":68,"title":69,"cover_image":70,"image_url":70,"created_at":71,"category":13},"32b4b194-f577-42ef-a59c-afd1458c2ec9","kimi-k25-pricing-and-features-explained-en","Kimi K2.5 pricing and features, explained","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782829088240-mtnn.png","2026-06-30T14:17:40.382654+00:00",{"id":73,"slug":74,"title":75,"cover_image":76,"image_url":76,"created_at":77,"category":13},"d695a7cb-7965-481e-a74d-6944085a2d5f","qodo-2-8-multi-repo-ai-code-review-beta-en","Qodo 2.8 adds multi-repo AI code review beta","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782821866951-zdx2.png","2026-06-30T12:17:24.287927+00:00",[79,84,89,94,99,104,109,114,119,124],{"id":80,"slug":81,"title":82,"created_at":83},"8008f1a9-7a00-4bad-88c9-3eedc9c6b4b1","surepath-ai-mcp-policy-controls-en","SurePath AI's New MCP Policy Controls Enhance AI Security","2026-03-26T01:26:52.222015+00:00",{"id":85,"slug":86,"title":87,"created_at":88},"27e39a8f-b65d-4f7b-a875-859e2b210156","mcp-standard-ai-tools-2026-en","MCP Standard in 2026: Integrating AI Tools","2026-03-26T01:27:43.127519+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"165f9a19-c92d-46ba-b3f0-7125f662921d","rag-2026-transforming-enterprise-ai-en","How RAG in 2026 is Transforming Enterprise AI","2026-03-26T01:28:11.485236+00:00",{"id":95,"slug":96,"title":97,"created_at":98},"6a2a8e6e-b956-49d8-be12-cc47bdc132b2","mastering-ai-prompts-2026-guide-en","Mastering AI Prompts: A 2026 Guide for Developers","2026-03-26T01:29:07.835148+00:00",{"id":100,"slug":101,"title":102,"created_at":103},"3ab2c67e-4664-4c67-a013-687a2f605814","garry-tan-open-sources-claude-code-toolkit-en","Garry Tan Open-Sources a Claude Code Toolkit","2026-03-26T08:26:20.245934+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"66a7cbf8-7e76-41d4-9bbf-eaca9761bf69","github-ai-projects-to-watch-in-2026-en","20 GitHub AI Projects to Watch in 2026","2026-03-26T08:28:09.752027+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"9f332fda-eace-448a-a292-2283951eee71","practical-github-guide-learning-ml-2026-en","A Practical GitHub Guide to Learning ML in 2026","2026-03-27T01:16:50.125678+00:00",{"id":115,"slug":116,"title":117,"created_at":118},"1b1f637d-0f4d-42bd-974b-07b53829144d","aiml-2026-student-ai-ml-lab-repo-review-en","AIML-2026 Is a Bare-Bones Student Lab Repo","2026-03-27T01:21:51.661231+00:00",{"id":120,"slug":121,"title":122,"created_at":123},"6d1bf3f6-e191-4d30-b55b-8a0722fa6afe","ai-trending-github-repos-and-research-feeds-en","AI Trending Tracks Repos and Research Feeds","2026-03-27T01:31:35.709532+00:00",{"id":125,"slug":126,"title":127,"created_at":128},"010539a1-4c3a-4bd3-937a-26616422ee0d","awesome-ai-for-science-research-tools-map-en","Awesome AI for Science Is Becoming a Real Research Map","2026-03-27T01:46:50.89513+00:00"]