Astryx
An open source React design system of accessible components, themes, and a CLI, built for people and AI agents
- Stars
- 13.8k
- Forks
- 1.1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
Astryx is a design system: a set of pre-built React components, themes, and templates that help teams build consistent user interfaces faster. It grew inside Meta and the README says it ships 150+ accessible components, dark mode, and a CLI. It is designed so both people and AI coding assistants can use the same docs and tooling.
- Build a React page using typed components such as buttons, forms, and tables
- Apply a ready-made theme such as neutral or butter, or override theme CSS custom properties
- Use the CLI to list components and read their documentation from the terminal
- Start from included templates or patterns such as table pages and form wizards
Great for
- React teams that want a ready-made, accessible component library
- Designers who want to customize the look through CSS theme variables
- Teams already using AI coding assistants who want consistent, documented components
- Developers who want to copy component source into their own project and modify it
Not ideal for
- Projects that need a stable, long-term API: the README says Astryx is currently in Beta
- Projects not using React 19 or later, which is a stated requirement
- Teams that want a design system with no code to adopt or maintain, since it requires installing packages and wiring up themes
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not specified in the README for users) · React 19 or later
Install core, theme, and peer dependencies with npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylexInstall the CLI as a dev dependency
npm install -D @astryxdesign/cli - 2
Run it
- Install the core package, a theme, and the peer dependencies with your package manager
- Add the CSS imports and theme provider as described in the @astryxdesign/core README
- Optionally add an npm script for the CLI in package.json
- Run the CLI, for example npm run astryx -- component --list, to see available components
- 3
Get the most out of it
- Install the CLI globally as well as per project to use it from any folder, as the README recommends
- Use the astryx docs command to read component documentation from the terminal or an AI assistant
- Customize brand look by overriding theme CSS custom properties instead of wrapping components
- Use the swizzle feature to copy a component's full source into your project when you need deeper changes
Downloads
Strengths
- Components are documented and follow consistent naming and prop conventions, according to the README
- Styling can be overridden with Tailwind, CSS modules, or plain CSS, so it does not force one styling approach
- Has a large real-world user base inside Meta, per the README, and is MIT licensed
Trade-offs
- The README says it is currently in Beta, so APIs may change
- Requires React 19 or later and several npm packages to get started
- Some packages such as charts are only available under a canary tag with no stable release yet
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| astryx (this) | 13.8k | Library | intermediate | 4 days ago | React teams that want a ready-made, accessible component library |
| material-ui | 99.3k | Library | intermediate | 4 days ago | React developers who want a consistent, prebuilt set of UI components |
| chakra-ui | 40.7k | Library | intermediate | 4 days ago | React developers who want prebuilt UI components instead of styling from scratch |
| mantine | 31.9k | Library | intermediate | 4 days ago | React developers building web apps who want many components out of the box |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.