facebook/astryx

Astryx is an open source collection of ready-made website components created by Meta and now released for anyone to use. A design system is essentially a shared toolkit of buttons, menus, forms, and other building blocks so that every screen in an app looks and behaves consistently without each team starting from scratch. Astryx grew inside Meta over eight years and ended up powering more than 13,000 internal applications before being published publicly. The library ships over 150 pre-built components built on React, the popular JavaScript framework for building web interfaces. You install a package, add a few CSS imports, and components are ready to drop into your pages. There is no extra build configuration required. Seven pre-designed visual themes are included, covering styles from a neutral professional look to playful options like butter, matcha, and y2k. If none of those match your brand, you apply your own colors and fonts through standard CSS variables without touching any component code. One of the more practical design choices is how customization works. When a component does not quite do what you need, a command-line tool can eject its full source code directly into your project. From that point the component is yours to change however you want. This is less common in design systems, which often lock their internals behind a closed interface. The system was specifically designed so that AI coding assistants and human developers use the same workflow and documentation. The API conventions are consistent enough that once you learn one component, others behave predictably, which also makes it easier for AI tools to generate correct code without special guidance. Components include standard accessibility support built in. Templates for common page layouts, forms, and data tables are also included so you are not assembling those patterns from individual pieces every time. The project is in public beta and is MIT licensed, meaning it is free to use in both personal and commercial projects.