Astryx (Meta)

Overview

Astryx is an open-source, enterprise-grade design system and comprehensive React component library created by Meta (Facebook). Refined internally over eight years to power more than 13,000 production applications across Meta, Astryx is engineered from the ground up for speed, creative flexibility, and seamless AI agent workflows (Agent-Ready). Featuring over 170 accessible, themeable components, Astryx couples React 19 fundamentals with StyleX and design tokens to eliminate repetitive styling overhead.

Key Features

• Battle-Tested at Scale: Powers 13,000+ internal apps across Meta, packaging 170+ production-grade components spanning complex forms, data tables, navigation trees, and interactive chat interfaces.
• Agent-Ready by Design: Ships with an official CLI and Model Context Protocol (MCP) server support, generating deterministic AGENTS.md and CLAUDE.md cheat sheets for autonomous coding agents.
• Dynamic Theming Engine: Offers curated theme packages (Neutral, Butter, Matcha, Gothic, Chocolate, Y2K) configured via CSS Custom Properties and Cascade Layers for zero-friction branding.
• Modern Foundation (React 19 & StyleX): Built for modern web architectures with native StyleX zero-runtime atomic styling integration alongside first-class Tailwind CSS compatibility.

Installation & Quick Start

# Install core packages, StyleX peer dependency, neutral theme, and CLI (React 19+)
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli

# Scaffold AI coding agent guidelines
npx astryx init

import React from 'react';
import { Button } from '@astryxdesign/core/Button';
import { VStack, Card } from '@astryxdesign/core/Layout';
import { Heading, Text } from '@astryxdesign/core/Typography';
import { Badge } from '@astryxdesign/core/Badge';

export function DashboardOverview() {
  return (
    <Card elevation="low" padding={6}>
      <VStack gap={4}>
        <div className="flex items-center justify-between">
          <Heading level={3}>Enterprise Console</Heading>
          <Badge tone="success" label="13k+ Apps at Meta" />
        </div>
        <Text tone="subtle">
          Built with Astryx, the enterprise-ready design system designed for speed, clarity, and AI agents.
        </Text>
        <Button
          variant="primary"
          label="Deploy Workspace"
          onClick={() => console.log('Triggered Astryx workflow')}
        />
      </VStack>
    </Card>
  );
}

Why Choose Astryx?

1. Proven Enterprise Reliability: Eliminate design system debt with rock-solid accessibility, keyboard navigation, and token hierarchies proven across Meta’s most demanding products.
2. AI-Native Engineering: Accelerate development with purpose-built CLI prompts, templates, and MCP interfaces tailored for LLMs and autonomous coding assistants.