Want a unified, maintainable UI without being locked into one styling library, and with your AI coding assistant following the same rules? astryx is an open source design system from Meta, grown out of its largest internal system that powered more than 13000 applications for 8 years. It is agent ready, which means humans and AI agents build interfaces from one shared toolchain, and it ships with zero build plugin friction so teams can adopt it quickly.
What Is astryx
astryx is an open source design system from Meta, derived from its largest internal system that supported more than 13000 apps over 8 years of real production use. It ships 150 plus accessible components, brand grade themes, dark mode, ready to use templates, and a command line tool. Developers just import prebuilt CSS and use typed React components, with no build plugins and no mandatory styling library to learn. It unifies the API, documentation, and CLI so that humans and AI assistants follow the same specification when composing interfaces. If you are new to the underlying library, see What Is React and How to Use It: The JavaScript Library for Building User Interfaces.
Because every component is typed, editors surface available props and accessibility rules while you write, which shortens review cycles for generated interfaces.
Features
- Open internals. Components compose at any level and export their building blocks, free from the closed API limits that trap teams in fixed layouts.
- Transparent styling. Styles are written in StyleX but stay invisible to you, so plain className overrides still work without fighting a hidden layer.
- Theming as properties. A theme is a set of CSS custom properties, so you rebrand at scale without forking the source.
- Lots of components. More than 150 accessible components cover common UI, plus higher level patterns like table and detail pages.
- Human and machine aligned. The API, docs, and CLI share one design language, so assistants write code from the same reference humans use.
- Ready templates. Built in templates and a CLI help you scaffold pages quickly, shortening the distance from blank file to working screen.
- Foundation layers. Foundations cover typography, color, layout, and accessibility, so the system stays coherent from raw tokens upward.
- Audit ready. Because it grew from Meta's internal system, the component contracts and a11y rules are documented rather than implied.
- Incremental adoption. You can mount astryx inside an existing React app and migrate one screen at a time.
How to Use
- Check the environment. You need Node and React 19 or later, since astryx treats React as a peer dependency rather than bundling its own copy.
- Install the package. Add the core package with npm or pnpm, for example
npm install @astryx/core. - Import styles. Bring in the prebuilt CSS at your entry file, with no extra build plugin or loader to configure.
- Use components. Pick typed React components from the docs and compose them in your pages like ordinary elements.
- Customize theme. Override theme variables through CSS custom properties to enable dark mode or apply brand colors.
- Use the CLI. Scaffold projects and preview components with Storybook through the command line tool.
- Check accessibility. Use the built in a11y checks to catch common defects during development rather than after launch.
Supported Platforms
| Item | Detail |
|---|---|
| Language | TypeScript |
| Framework | React 19 or later (peer dependency) |
| Styling | StyleX (invisible to consumers) |
| Layers | Foundations, Components, Patterns |
| Repo shape | pnpm monorepo with docs and Storybook |
| Components | 150 plus accessible components |
| Theming | Brand themes and dark mode |
| Tooling | Built in CLI and templates |
| License | MIT |
All of the above run on the same pnpm monorepo, so the docs site, Storybook, and published packages stay in sync as the project evolves. Because the styling layer is transparent, you can adopt astryx incrementally inside an existing React app without rewriting your build pipeline.
Pricing
astryx is MIT licensed and free for commercial and personal use with no feature gating. The code lives in a public GitHub monorepo, and the core, cli, build, and themes packages install independently so you take only what you need. Meta maintains it as the open source release of its internal system, so there is no fee, no approval step, and no telemetry to disable before you start.
Use Cases
- Large product UIs. Teams that want one design language yet flexible component composition across many surfaces.
- Consistent cross platform. Brand themes and dark mode keep web and desktop experiences visually aligned.
- AI assisted development. Product teams that want assistants to follow the same component rules instead of inventing markup.
- Design system migration. Moving from closed or in house systems to a mature open source one with less risk.
- Accessibility compliance. The 150 plus accessible components ease conformance work for regulated products.
- Fast prototyping. Templates and CLI take you from idea to demo quickly, which helps stakeholder reviews.
- Multi brand products. Switch brand themes at runtime so one codebase serves several visual identities without maintaining forked components.
- Incremental rollout. Mount it beside an existing component library and migrate one screen at a time, keeping current releases stable.
How It Works
astryx is open sourced and maintained by Meta, the public face of its largest internal system backed by 13000 plus real apps in production. The project is a monorepo: apps holds the documentation site and Storybook, packages holds the published libraries, and internal holds test tooling. It opens the core under MIT so the community can use and contribute. Still in Beta, it already ships a full component library and CLI, with a roadmap centered on agent ready tooling. Because it comes from Meta's internal track record, component quality and accessibility standards are validated at scale, which is calmer than many design systems built from scratch.
Tokens, foundations, and component contracts are released together, so a theme change propagates consistently instead of leaving screens half updated.
Conclusion
If you want a mature design system that is not tied to one styling library, and you want AI assistants to follow the same rules, astryx is worth a close look. It carries Meta's 8 year track record and ships with zero build friction, so adoption is low risk. Its component coverage and accessibility support suit teams that ship fast and care about a11y. Project address https://github.com/meta/astryx , site https://astryx.atmeta.com .
Start with a single screen and judge the fit from real usage before migrating a whole product.