Meta has open-sourced Astryx, a React 19+ design system developed internally over eight years that powers 13,000+ applications and provides 150+ accessible components with brand-level theming, dark mode, and ready-to-ship templates. Built on StyleX for styling, Astryx requires no build plugin or styling library adoption — consumers import pre-built CSS and typed React components, and can override styles using className with Tailwind, CSS modules, or plain CSS. The system emphasizes open internals: building blocks are exported directly, and a swizzle command ejects full component source for ownership. Theming uses CSS custom property overrides across seven published themes (neutral, butter, chocolate, matcha, stone, gothic, y2k), enabling customization without forking or wrapping. Installation adds @astryxdesign/core, a theme package, @stylexjs/stylex, and the optional @astryxdesign/cli (globally or per-project) for component docs, templates, scaffolding, and codemods. A minimal setup requires only CSS imports and a ThemeProvider. The CLI integrates with package.json scripts to ensure reliable invocation by AI assistants and developers. Experimental packages @astryxdesign/lab, @astryxdesign/vega, and @astryxdesign/charts exist under canary tags. The monorepo uses Node 22+, pnpm 11, and includes Storybook, documentation, and example apps. Astryx is MIT-licensed and in beta.

Read original