Meta's Astryx: An Agent-Ready Open Source Design System
Meta's open source Astryx design system offers 150+ components, React and StyleX theming, and a CLI built for both developers and AI agents.
After eight years of internal development at Meta, where it grew into the company's largest and most-used design system across more than 13,000 apps, Astryx has now been released as open source. Currently in beta and built on React and StyleX, it bundles over 150 accessible components, brand-level theming, dark mode, ready-made templates, and a CLI into one cohesive package. Developers import pre-built CSS and typed React components directly, with no build plugin or extra styling library required.
What sets Astryx apart is its open internal structure rather than a closed top-level API: components can be composed at any level, and a 'swizzle' command lets developers eject a component's full source into their own project for deeper customization. Although Astryx is authored with StyleX internally, that choice stays invisible to consumers, who can override styles with Tailwind, CSS modules, or plain CSS. Themes are defined as sets of CSS custom properties, letting designers apply their own branding without forking or wrapping component source.
A core design goal is that both human developers and AI coding assistants build the same way, using the same API, documentation, and CLI — the team notes that every change that made the system easier for AI also made it easier for people. The architecture spans foundational styling primitives, reusable components, and proven UI patterns like table pages, form wizards, and navigation flows, plus seven ready-made themes (neutral, butter, chocolate, matcha, stone, gothic, y2k), while chart-related packages remain experimental under a canary release tag.