--- title: Meta Open-Sources Astryx, Its Agent-Ready React Design... description: Meta has open-sourced Astryx, a React design system built internally over eight years, now in beta under the MIT license. It runs on React 19 and Meta's StyleX... canonical: https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Meta Open-Sources Astryx, Its Agent-Ready React Design System | daily.dev og:description: Meta has open-sourced Astryx, a React design system built internally over eight years, now in beta under the MIT license. It runs on React 19 and Meta's StyleX... og:url: https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf og:image: https://api.daily.dev/og/posts/CaH6B5xQf.png og:image:alt: Meta Open-Sources Astryx, Its Agent-Ready React Design System og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Meta Open-Sources Astryx, Its Agent-Ready React Design System **[InfoQ](https://daily.dev/sources/infoq)** · 2 min read · 22 upvotes · 1 comments ## Summary Meta has open-sourced Astryx, a React design system built internally over eight years, now in beta under the MIT license. It runs on React 19 and Meta's StyleX CSS-in-JS compiler, offering over 150 accessible UI components, customizable design tokens, and a CLI with a swizzle command to eject component source code. Astryx also ships CLI and MCP tooling aimed at AI agent workflows. Components support className interop with Tailwind and CSS Modules. Some Reddit users questioned long-term maintenance and governance of a Meta-sponsored framework, while others have begun porting its token architecture to Svelte 5 and Flutter. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is Astryx, Meta's new open-source React design system? Astryx is an open-source React design system Meta developed internally over eight years, released in beta under the MIT license. It requires React 19 or later and builds on StyleX, Meta's build-time CSS-in-JS compiler, providing over 150 accessible UI components, customizable design tokens, and dedicated CLI and MCP tooling for both engineers and AI agents. _Teams evaluating new design systems can track releases like Astryx as they emerge on daily.dev._ ### How do I customize a component's appearance or behavior in Astryx without ejecting its source code? Design tokens and component-specific classes let developers customize appearance, while standard React compositional patterns, such as the wrapper pattern, allow customizing a single instance's or every instance's behavior. Code ejection via the CLI's swizzle command is only needed when customization requires access to unexposed internals like private state, DOM structure, or inaccessible event listeners. _Developers weighing customization trade-offs in a design system can compare approaches on daily.dev._ ### Can Astryx components be styled with Tailwind CSS or CSS Modules instead of StyleX? Yes, Astryx components maintain native className support so teams can interoperate with Tailwind, CSS Modules, or vanilla stylesheets alongside the compile-time typed xstyle property for StyleX. Using pre-compiled CSS and className works without any additional compiler setup, letting teams mix styling approaches. _Frontend developers mixing styling tools follow interoperability details like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@ristotoldsep** · 2 upvotes > Eight years of internal use is a better endorsement than another design system built over a weekend. Governance is the real dependency now. ## Similar posts on daily.dev - [Issue \#481: Meta's new open source React design system — React Status](https://daily.dev/posts/issue-481-meta-s-new-open-source-react-design-system-react-status-uppn3m1vj) · React Status · 2 upvotes · 1 comments - [Astryx vs. shadcn/ui: Testing Meta’s AI-friendly React design system with Claude Code](https://daily.dev/posts/astryx-vs-shadcn-ui-testing-meta-s-ai-friendly-react-design-system-with-claude-code-vbuoqhcrn) · LogRocket · 5 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#mcp](https://daily.dev/tags/mcp) [View this post on daily.dev](https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Meta Open-Sources Astryx, Its Agent-Ready React Design System","url":"https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf"},"datePublished":"2026-09-13T23:44:38.223Z","dateModified":"2026-09-13T23:44:59.666Z","description":"Meta has open-sourced Astryx, a React design system built internally over eight years, now in beta under the MIT license. It runs on React 19 and Meta's StyleX...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f067953cae698c4f858a3eca5077902b?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f067953cae698c4f858a3eca5077902b?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"InfoQ","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"InfoQ","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/afc3bced3e1e4b188dd9127017a60e0c","url":"https://daily.dev/sources/infoq"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,react,mcp","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"InfoQ","item":"https://daily.dev/sources/infoq"},{"@type":"ListItem","position":3,"name":"Meta Open-Sources Astryx, Its Agent-Ready React Design System"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf","comment":[{"@type":"Comment","text":"Eight years of internal use is a better endorsement than another design system built over a weekend. Governance is the real dependency now.","datePublished":"2026-09-14T10:55:25.095Z","url":"https://daily.dev/posts/CaH6B5xQf#c-xmhM9WYZ6","author":{"@type":"Person","name":"Risto Tõldsep","url":"https://daily.dev/ristotoldsep","image":"https://lh3.googleusercontent.com/a/ACg8ocLDWc6mZn0JwNmXXw6WY0L_HJ6pegzRttooC5VgtXESHSj3MNYx=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/meta-open-sources-astryx-its-agent-ready-react-design-system-cah6b5xqf#faq","mainEntity":[{"@type":"Question","name":"What is Astryx, Meta's new open-source React design system?","acceptedAnswer":{"@type":"Answer","text":"Astryx is an open-source React design system Meta developed internally over eight years, released in beta under the MIT license. It requires React 19 or later and builds on StyleX, Meta's build-time CSS-in-JS compiler, providing over 150 accessible UI components, customizable design tokens, and dedicated CLI and MCP tooling for both engineers and AI agents. Teams evaluating new design systems can track releases like Astryx as they emerge on daily.dev."}},{"@type":"Question","name":"How do I customize a component's appearance or behavior in Astryx without ejecting its source code?","acceptedAnswer":{"@type":"Answer","text":"Design tokens and component-specific classes let developers customize appearance, while standard React compositional patterns, such as the wrapper pattern, allow customizing a single instance's or every instance's behavior. Code ejection via the CLI's swizzle command is only needed when customization requires access to unexposed internals like private state, DOM structure, or inaccessible event listeners. Developers weighing customization trade-offs in a design system can compare approaches on daily.dev."}},{"@type":"Question","name":"Can Astryx components be styled with Tailwind CSS or CSS Modules instead of StyleX?","acceptedAnswer":{"@type":"Answer","text":"Yes, Astryx components maintain native className support so teams can interoperate with Tailwind, CSS Modules, or vanilla stylesheets alongside the compile-time typed xstyle property for StyleX. Using pre-compiled CSS and className works without any additional compiler setup, letting teams mix styling approaches. Frontend developers mixing styling tools follow interoperability details like this on daily.dev."}}]} ```