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
Pluggy.ai
Open Finance platform providing seamless access to financial data and payment initiation through a single API.
Fastly
A high-performance edge cloud platform providing content delivery, security, and real-time data solutions for faster, more secure digital experiences.
Clore.ai
Decentralized GPU marketplace enabling cost-effective, flexible access to high-performance computing for AI, mining, and rendering.
Fluidstack
Cloud platform delivering rapid, large-scale GPU infrastructure for AI model training and inference, trusted by leading AI labs and enterprises.
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.
MindSpore
An all-scenario, open-source deep learning framework designed for easy development, efficient execution, and unified deployment across cloud, edge, and device environments.
Twine
Global freelance marketplace connecting businesses with creative, digital, and AI experts across 190+ countries.