Astryx: Meta's Open Source Design System with 150+ Components, Customizable and AI-Agent Ready

✍️ OpenClawRadar📅 Published: June 30, 2026🔗 Source
Astryx: Meta's Open Source Design System with 150+ Components, Customizable and AI-Agent Ready
Ad

Meta has open-sourced Astryx, a design system built on React and StyleX with over 150 components. Currently in beta, it's already powering more than 13,000 apps internally at Meta, shaped over eight years by engineers, designers, and product teams.

Key Features from the Source

  • Component count: 150+ accessible, themeable React components with built-in spacing, dark mode, and flexible styling.
  • CLI & MCP support: Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line or via the Model Context Protocol (MCP).
  • Customizable theming: Start with ready-to-use themes and adapt without starting from scratch.
  • Production-ready templates: Templates for common pages — just plug in your content.
  • Built with StyleX: Meta's own CSS-in-JS solution, now open source as well, providing zero-runtime styling.
Ad

Practical Details from the Site

The landing page demonstrates a full e-commerce UI: inventory management with filters (categories, locations, tags), a live chat agent that handles order tracking and returns, a shopping cart with shipping methods, and a revenue dashboard. The design system includes components like Badge, Checkbox, Switch, Buttons, Cards, and more, all visible in the component explorer.

The CLI can be used to generate themes and scaffold projects. For agent integration, Astryx provides MCP server support, allowing AI coding agents to browse components, generate themes, and fetch docs directly from the command line.

Astryx is open source under a permissive license (MIT or similar, check repo). The project is available at astryx.atmeta.com. You can start by running the CLI after installing the package:

npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcp

These commands are inferred from the site description; exact syntax may vary.

Who It's For

Developers building React applications who need a battle-tested design system with AI-agent integration for rapid prototyping and production use.

📖 Read the full source: HN AI Agents

Ad

👀 See Also