Astryx Explained: Meta’s React Design System for People and AI Agents

CODE LAB · PROJECT SPOTLIGHT

Astryx TypeScript · MIT license

Meta’s React design system for consistent interfaces built by developers and AI agents.

GitHub source ↗Releases ↗

Preview: meta/astryx on GitHub

Astryx is Meta’s open-source React design system: a shared set of interface components and conventions intended to help developers and AI agents build product interfaces consistently. The repository combines components, documentation and tooling rather than treating a visual style as a collection of isolated screenshots.

What is inside the repository?

The project describes a library of more than 150 components, with themes, documentation and tooling. Its React components and StyleX-based styling offer building blocks for common interface patterns. The project’s documentation and Storybook provide examples for learning how those pieces fit together.

For an AI-assisted workflow, that consistency matters: an agent can work from a shared component vocabulary and examples instead of inventing every button, menu and layout from scratch. The developer still needs to check accessibility, behavior and whether the result fits the product.

Inside the source: disabled state

This excerpt from Button.tsx combines the button’s own disabled state with its surrounding group and input group. A component can therefore account for context as well as a direct property.

742const groupDisabled = buttonGroup?.isDisabled ?? false;743const inputGroupState = use(InputGroupInternalContext);744const isTrueDisabled =745  isDisabled || groupDisabled || inputGroupState.isDisabled;

Source: Meta and Astryx contributors, MIT license. Excerpt shown for discussion; linked to the reviewed revision.

Where it fits

Astryx is useful to explore if your team wants a common design language for human developers and coding agents. Check the project’s current setup instructions and React requirements before adopting it, and assess the components against your own accessibility and browser requirements.

Compare this interface-focused project with T3 Code, an environment for AI coding agents. The two projects address different parts of a development workflow.

Sources: Astryx repository · Releases · README at reviewed revision