Repolode
Submit
facebook

facebook/astryx

An open source React design system with 150+ accessible components, themes, and a CLI, built on React 19 and StyleX.

View on GitHubWebsite
Stars
13,703
Forks
1,180
Open issues
526
Last commit
15 hours ago

What is it?

Astryx is an open source design system that originated inside Meta and is now published for external use. It provides typed React components, brand-level theming, dark mode, and ready-to-ship templates as a single system.

You import pre-built CSS and a theme provider, then use the components directly, with no build plugin required. Styling is authored with StyleX but is hidden from consumers, who can override components with className using Tailwind, CSS modules, or plain CSS. Themes are sets of CSS custom property overrides, so a theme can be customized without forking component source.

The project also includes a CLI for component documentation, templates, scaffolding, and codemods. Its API and docs are designed so that developers and AI assistants can work from the same reference. The project is currently in beta and requires React 19 or later.

Key features

  • 01Over 150 accessible React components with full TypeScript support.
  • 02Seven ready-made themes that can be customized through CSS custom properties.
  • 03Dark mode and brand-level theming.
  • 04Components can be overridden with className using Tailwind, CSS modules, or plain CSS.
  • 05A swizzle command ejects a component's source into your project.
  • 06A CLI for component docs, templates, scaffolding, and codemods.

Use cases

  • Building a React application that needs a consistent, accessible component library.
  • Creating a branded product UI by customizing theme variables instead of forking components.
  • Giving AI coding assistants a documented component API to build interfaces from.

Quick start

  1. 1

    Install core, a theme, StyleX, and the CLI with npm

    npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli
  2. 2

    Follow the core package quick start for CSS imports and theme provider setup

  3. 3

    Contributors: enable Corepack and install dependencies in the repo

    corepack enable pnpm install

Things to know

  • Currently in Beta, so APIs may change.
  • Published packages @astryxdesign/vega and @astryxdesign/charts only have @canary releases with no stable version yet.
  • Requires React 19 or later.

Topics

#react#design-system#ui-components#stylex#typescript#theming#accessibility

FAQ

What is astryx?
An open source React design system with 150+ accessible components, themes, and a CLI, built on React 19 and StyleX. Astryx is an open source design system that originated inside Meta and is now published for external use. It provides typed React components, brand-level theming, dark mode, and ready-to-ship templates as a single system.
Is astryx free to use? What license does it have?
astryx is open source under the MIT license. Check the license terms before using it in commercial products.
Is astryx still maintained?
Actively maintained. The last commit to astryx was on Oct 19, 2026.
What can I use astryx for?
Building a React application that needs a consistent, accessible component library. Creating a branded product UI by customizing theme variables instead of forking components. Giving AI coding assistants a documented component API to build interfaces from.
How do I install astryx?
Install core, a theme, StyleX, and the CLI with npm: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli Follow the core package quick start for CSS imports and theme provider setup Contributors: enable Corepack and install dependencies in the repo: corepack enable pnpm install
Where can I get astryx?
The source code and installation instructions are on GitHub: https://github.com/facebook/astryx

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects