astryx

astryx

Gives React teams a design system with over 150 accessible components, theming, dark mode, templates and a CLI, for people and AI assistants alike. In Beta, built on React 19 or newer and StyleX.

Made by meta on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

About

What it is: Astryx is an open source design system for React, in Beta, built on StyleX. It grew inside Meta over eight years, and the project says it became the company's largest and most used design system, powering more than 13,000 apps. It is made for people and AI assistants to build with together.

Who it suits: Astryx suits front-end developers and design teams who build React apps with one shared look, and teams where AI assistants write interface code.

Industry | Who uses it | How they use it | Example
Web and software products | Front-end developers | Build screens from typed React components | Assembling a settings page from ready components
Design teams | Designers and brand owners | Apply a brand through theming and dark mode | Switching an app between light and dark looks
Product teams | Product teams | Start from ready-to-ship templates | Starting a new screen from a template
AI assisted development | Developers working with AI assistants | Let people and assistants share the same tooling | An assistant and a developer using the same components in one codebase

Teams that do not use React can skip it.

Where to use it: Astryx fits projects built on React and the places where people and AI assistants write interface code.

• React 19 or newer projects
• Your own codebase, where you import typed components and pre-built CSS
• Apps that need brand theming and dark mode
• AI coding assistants that use the same tooling

Use case | Who | What they get back
Building interfaces | Developers | More than 150 accessible, typed React components
Branding | Designers | Brand-level theming and dark mode
Customizing a component | Experienced developers | A component's whole source in their own project through swizzle

How to set it up: You need only a React project, since no build plugin or styling library is required.

1. Start from a project on React 19 or newer.
2. Copy the code with git from the GitHub page, or follow the project's README to add Astryx.
3. Import the pre-built CSS.
4. Use the typed React components in your screens.

How to use it: You import components and build screens with them. When you need more control, you use swizzle, and the component's whole source lands in your project, where you own it. The system ships these parts:

Tool | What it does
Components | More than 150 accessible React components
Theming | Brand-level theming and dark mode
Templates | Ready-to-ship starting points
CLI | A command line tool that comes with the system
swizzle | Moves a component's whole source into your project

Example: A developer needs a component that behaves differently from the stock one. They use swizzle, and the component's whole source lands in their project to edit.

For newcomers and experts: A design system is a shared set of ready made screen parts, such as buttons and menus, so every page of an app looks and behaves alike. A first small thing to try is placing one component in a React 19 project.

The CSS comes pre-built and the components are typed React, so you add no build plugin and no styling library. Styles are written in StyleX, which stays hidden from you. The internals are open: building blocks are exported so you can compose at any level, and swizzle takes you deeper when the API runs out. It is in Beta, so details may still change.

You import the pre-built CSS
You use typed React components
Theming sets your brand and dark mode
Swizzle moves a component's source to you

Good to know: This kit holds notes and a pointer to the code, so nothing runs by itself.

• License: MIT
• Cost to run: none named
• Data it reaches: none named
• Not for: a finished, settled release, since it is in Beta

On GitHub, 8 November 2026

• Stars: 14,579 (96 that day)
• Forks: 1,192
• Watching: 80
• Open issues and pull requests: 727
• Language: TypeScript
• License: MIT
• Trending: #6 repository of the day on GitHub trending (8 November 2026)

Links

• Code: https://github.com/meta/astryx
• Releases: https://github.com/meta/astryx/releases
• Issues: https://github.com/meta/astryx/issues
• Star history: https://www.star-history.com/#meta/astryx&Date

Get the code

git clone https://github.com/meta/astryx.git

Then follow the setup in its README. Nothing in this kit runs by itself.