Astryx — Open-Source Agent-Ready Design System by Meta

Introduction

Astryx is an open-source design system created by Meta that takes a fresh approach to component libraries. Every component is designed to be fully customizable and equally usable by human developers writing JSX and AI coding agents generating UI code. It ships with a token-based theming system and accessibility built into every component.

What Astryx Does

• Provides a library of accessible React components with consistent design language
• Ships with a token-based theming system for deep visual customization
• Includes structured component descriptions that AI coding agents can interpret
• Supports responsive layouts with built-in breakpoint utilities
• Offers dark mode, RTL, and high-contrast variants out of the box

Architecture Overview

Astryx is built as a set of composable React components that consume design tokens for colors, spacing, typography, and motion. Each component exposes a declarative API surface that maps naturally to both human authoring and LLM code generation. The token system cascades through CSS custom properties, making theme switching instant without re-rendering. Accessibility attributes are injected automatically based on component semantics.

Self-Hosting & Configuration

• Install via npm or yarn into any React project (Next.js, Vite, CRA)
• Wrap your app with the AstryxProvider and optionally pass a custom theme
• Override individual design tokens in your theme file for brand alignment
• Tree-shaking is supported so only imported components land in your bundle
• Works with server-side rendering frameworks without additional configuration

Key Features

• Agent-friendly component APIs with structured metadata for AI code generation
• Token-based theming that separates design decisions from component logic
• WCAG 2.1 AA compliance built into every component by default
• Motion primitives for consistent animation behavior across the system
• Figma design kit included for designer-developer handoff

Comparison with Similar Tools

• shadcn/ui — Copy-paste components with Tailwind, while Astryx provides a cohesive token-based design system
• Chakra UI — Similar composable philosophy, but Astryx adds explicit agent-readiness and Meta's design language
• Ant Design — Enterprise-focused with opinionated defaults, while Astryx is more customizable and lightweight
• Radix UI — Unstyled primitive components, while Astryx ships with a complete visual design out of the box

FAQ

Q: What does agent-ready mean? A: Each component includes structured metadata describing its purpose, props, and usage patterns, enabling AI coding agents to generate correct component code reliably.

Q: Can I use it outside of React? A: The current release targets React. Web component and Vue ports are on the roadmap.

Q: How does theming work? A: Pass a theme object to AstryxProvider that overrides default design tokens. Changes propagate through CSS custom properties instantly.

Q: Is it production-ready? A: Yes, Astryx is used internally at Meta and follows semantic versioning with stable API guarantees.

Sources

• https://github.com/facebook/astryx
• https://astryx.dev/