An open-source design system built on React and StyleX, Astryx originates from Meta's extensive internal tooling. It provides foundational elements, components, templates, and themes designed for consistency, accessibility, and dual human/AI agent usability, aiming to accelerate development and maintainability for large-scale applications.

How It Works

The system is built with React and StyleX, exporting all primitives for maximum composability without abstraction. It features automatic, context-aware spacing compensation to eliminate common padding issues and a robust, CSS variable-driven theming system supporting ten customizable themes. A key innovation is its "agent-ready" architecture, incorporating JSDoc annotations and a dedicated CLI/MCP server, enabling AI agents to scaffold, browse, and document interfaces using the same APIs as human developers.

Quick Start & Requirements

Installation involves adding core packages like @astryxdesign/core and @astryxdesign/theme-neutral via pnpm, npm, or yarn. Development requires Node.js and pnpm (version 10 recommended, managed via Corepack). A package.json script ("xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs") is recommended for reliable CLI access. Full setup instructions are detailed in the @astryxdesign/core README.

Highlighted Details

• Powers over 13,000 internal Meta applications, refined over eight years.
• Offers 90+ accessible, themeable React components with built-in spacing and full TypeScript support.
• Features an "agent-ready" CLI and MCP server for AI-driven project scaffolding, documentation, and theme generation.
• Includes ten fully customizable themes and production-ready templates for common page layouts.

Maintenance & Community

No specific details regarding maintainers, community channels (e.g., Discord, Slack), or roadmap are provided in the README.

Licensing & Compatibility

The project is released under the MIT License, permitting broad use, including commercial applications and integration with closed-source projects.

Limitations & Caveats

Astryx is currently in Beta. Experimental packages like @astryxdesign/lab and @astryxdesign/vega are used internally at Meta but are not yet published to npm.