An open-source React design system combines reusable components, flexible theming and AI-ready development tools to help developers build accessible and consistent web applications.
Astryx is an open-source React design system developed to simplify modern web application development while supporting both traditional and AI-assisted software development workflows. The framework integrates reusable interface components, theming, accessibility features and developer tools into a single platform, enabling faster and more consistent user interface development.
The framework provides more than 150 accessible React components, seven built-in themes, templates that are ready-to-use, dark mode capabilities and a command line interface (CLI). Built on React and StyleX, it comes with pre-built CSS, meaning that developers do not need other styling solutions as they work with typed React components.
Unlike conventional design systems that tightly couple component behaviour with appearance, Astryx separates component behaviors from their styling. Accessibility, interactions and components remain unchanged as far as colour, typography, spacing, motion and other aspects are concerned. Organizations can have unique user experiences by designing according to their specifications without changing anything within the component’s source code.
Astryx follows a three-layer architecture which includes foundations, components and patterns. Foundations include typography, colours, layouts and accessibility primitives, whereas more than 150 components with support for TypeScript are used to construct user interfaces. Patterns provide ready-to-use components for the most typical workflows such as forms, navigation, tables, detail pages and data entry operations. Components may be also customised using Tailwind CSS, CSS Modules or CSS.
To support AI-assisted software development, Astryx comes equipped with a CLI that can create project templates, manage themes, print component documentation, perform codemods for version migrations and provide machine-readable documentation via Model Context Protocol (MCP). Consistent APIs, naming conventions and documentation help both developers and AI assistants to use components more effectively.
Astryx currently supports React 19 and later can be deployed via Next.js, Vite or CDN. With the combination of reusable components, theming, accessibility and AI-friendly tooling included into one open-source package, Astryx provides developers with a scalable foundation for building modern React applications while reducing development complexity.
