astryx — What is it?

Astryx is an open-source design system that provides a fully customizable and agent-ready toolkit for building visually cohesive and accessible interfaces.

⭐ 8,003 Stars 🍴 681 Forks TypeScript MIT Author: facebook
Source: README View on GitHub →

Why it matters

Astryx is gaining attention due to its integration with React and StyleX, offering a comprehensive set of components and theming capabilities. Its open architecture and customization options without wrapping stand out, addressing the need for a flexible and scalable design system that can be easily adapted to various projects.

Source: README

Core Features

Customizable Components

Astryx provides over 150 accessible components with full TypeScript support, allowing for deep customization and composition without the need for additional styling libraries.

Source: README
Brand-Level Theming

The system includes brand-level theming and dark mode support, enabling designers to create a consistent and cohesive brand experience.

Source: README
CLI Tooling

Astryx offers a CLI for component documentation, templates, scaffolding, themes, and codemods, enhancing the developer experience and streamlining the development process.

Source: README

Architecture

The architecture of Astryx is modular, with a clear separation of concerns. It includes foundational elements for typography, color, layout, and accessibility, a library of UI components, and patterns for common interactions. The project structure is organized into directories for example apps, published packages, and internal tooling, indicating a focus on maintainability and scalability.

Source: Code tree + README

Project Knowledge Graph

Knowledge graph: project (center) + core features (inner hexagons) + key dependencies (outer chips) @astryxdesign/core@astryxdesign/… @astryxdesign/cli@astryxdesign/… @astryxdesign/build@astryxdesign/… @astryxdesign/theme-*@astryxdesign/… Customizable ComponentsCustomizable Compon… Brand-Level Theming CLI Tooling astryx Project Core feature Key dependency

Center: project; inner ring: core feature modules; outer ring: key dependencies. Auto-generated from core_features and tech_stack.key_deps.

Tech Stack

LanguageTypeScriptFrameworkReact
@astryxdesign/core@astryxdesign/cli@astryxdesign/build@astryxdesign/theme-*
Not enough information.
Source: Dependency files + README

Quick Start

Install Astryx and a theme: ```bash # npm npm install @astryxdesign/core @astryxdesign/theme-neutral npm install -D @astryxdesign/cli # pnpm pnpm add @astryxdesign/core @astryxdesign/theme-neutral pnpm add -D @astryxdesign/cli # yarn yarn add @astryxdesign/core @astryxdesign/theme-neutral yarn add -D @astryxdesign/cli ```
Source: README Installation/Quick Start

Use Cases

Astryx is suitable for developers and design teams looking to build scalable and customizable UI components for web applications. It is particularly useful for projects that require a consistent brand experience, dark mode support, and seamless integration with React.

Source: README

Strengths & Limitations

Strengths

  • Strength 1: Comprehensive set of customizable components
  • Strength 2: Open architecture and deep customization
  • Strength 3: Integration with React and StyleX

Limitations

  • Limitation 1: Currently in Beta, may have some limitations
  • Limitation 2: Relies on external dependencies like React and StyleX
Source: Synthesis of README, code structure and dependencies

Latest Release

v0.1.2 (2026-06-29): Renamed color values in components and continued to remove the 'xds' naming from the public API.

Source: GitHub Releases

Verdict

Astryx is a promising open-source design system that offers a robust set of features for building modern web applications. Its focus on customization, accessibility, and seamless integration with React makes it a valuable tool for teams looking to create consistent and scalable UI components.

Source: Synthesis

Frequently Asked Questions

What is astryx?

Astryx is an open-source design system that provides a fully customizable and agent-ready toolkit for building visually cohesive and accessible interfaces.

What are the main features of astryx?

astryx's core features include: Customizable Components, Brand-Level Theming, CLI Tooling.

Why is astryx trending?

Astryx is gaining attention due to its integration with React and StyleX, offering a comprehensive set of components and theming capabilities.

What is astryx used for?

Astryx is suitable for developers and design teams looking to build scalable and customizable UI components for web applications.

Transparency Notice
This page is auto-generated by AI (a large language model) from the following public materials: GitHub README, code tree, dependency files and release notes. Analyzed at: 2026-07-01 18:32. Quality score: 85/100.

Data sources: README, GitHub API, dependency files