Astryx
Open-source React design system with 160+ accessible components, flexible theming, templates, and agent-ready tooling.
Community:
Product Overview
What is Astryx?
Astryx is Meta's open-source design system for building production-ready React interfaces. Built on React 19+ and StyleX, it combines accessible components, token-based theming, dark mode support, and reusable page templates in one toolkit. Teams can adopt its precompiled CSS for a fast setup or build from source for more granular styling control. Its CLI and MCP server also give coding agents structured access to component documentation, examples, templates, and design-system conventions.
Key Features
Accessible React Components
Provides over 160 themeable React components with consistent APIs, built-in spacing, dark mode support, and reusable interaction patterns.
Brand-Level Theming
Lets teams define colors, typography, spacing, motion, and component overrides through tokens instead of rewriting component implementations.
Flexible Customization Path
Supports progressive customization, from using components as-is to applying custom CSS, extending variants, or ejecting full component source code.
Production-Ready Templates
Includes ready-to-use page patterns that help teams start common product interfaces with a structured layout rather than a blank canvas.
Agent-Ready Documentation
Offers a CLI that generates compact agent context files and an MCP server that lets compatible tools search component docs and retrieve usage examples.
Dual Distribution Options
Can be installed as precompiled CSS for quick adoption or consumed from TypeScript and StyleX source for component-level style optimization.
Use Cases
- Internal Product Tools : Build dashboards, admin panels, workflow tools, and data-heavy interfaces with consistent controls, forms, tables, and navigation patterns.
- Branded Web Applications : Create a distinct product identity by applying custom themes and component overrides while preserving shared behavior and accessibility.
- Fast Product Prototyping : Use components and page templates to turn product concepts into functional React interfaces without rebuilding common UI patterns.
- Design System Standardization : Give multiple product teams a common UI foundation, reducing duplicated frontend work and improving consistency across applications.
- AI-Assisted Frontend Development : Equip coding agents with version-specific component references, rules, and examples so generated UI code follows Astryx conventions.
- Customizable Enterprise Interfaces : Adapt complex application interfaces to organization-specific design requirements without permanently forking the underlying system.
FAQs
Astryx Alternatives
Nango
A developer-first integration platform offering flexible, customizable API integrations with 400+ pre-built APIs and enterprise-grade infrastructure.
Walrus
A verifiable data platform for developers building in AI and onchain finance, where every byte is provable, programmable, and always available.
Fluidstack
Cloud platform delivering rapid, large-scale GPU infrastructure for AI model training and inference, trusted by leading AI labs and enterprises.
Speakeasy
Centralized enterprise control plane that governs, secures, and observes agents, MCP servers, and skills across existing identity and infrastructure.
ProtoFlow
Desktop PCB design software for drafting circuits, importing real components, and preparing editable designs for downstream EDA tools.
Flower AI
Open-source federated learning framework and hybrid AI platform enabling privacy-preserving, scalable AI across devices and clouds.
MindSpore
An all-scenario, open-source deep learning framework designed for easy development, efficient execution, and unified deployment across cloud, edge, and device environments.
Start.dev
Developer platform for discovering, launching, and managing software projects from a centralized workspace.