Meta/Astryx: An open source design system that's fully customizable and agent ready

Overview and Background

Astryx is an open source design system that grew inside Meta over the last eight years. It became the largest and most-used design system in the company, powering over 13,000 applications. Built on React 19+ and StyleX, it provides 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system.

Key Features

What makes Astryx different is its focus on open internals and AI readiness. It features no styling lock-in, allowing developers to override styles using Tailwind, CSS modules, or plain CSS. Themes are managed via CSS custom properties, enabling deep customization without forking component sources. Furthermore, its API, documentation, and CLI are designed concurrently so that people and AI assistants build interfaces in the exact same way.

Getting Started and Architecture

Astryx requires React 19 or later. Users can install the core package, themes, and CLI via npm, pnpm, or yarn. The project is organized into modular packages including @astryxdesign/core, @astryxdesign/cli, and a set of ready-made customizable themes, making it easy to integrate into existing React and Vite projects.