Astryx: A customizable 150+ component design system for React 19+
A 150+ component design system for React 19+ teams that can customize themes and source without locking in a styling solution.
GitHub meta/astryx Updated 2026-11-08 Branch main Stars 14.5K Forks 1.2K
React 19+ TypeScript StyleX Design system CLI CSS Custom Properties

🧭 Decision Guide

Try it if you

  • You are building a React 19+ application that needs 150+ accessible components with TypeScript support.
    The README's Overview and Architecture/Components sections state that Astryx supports React 19+ and provides 150+ reusable UI building blocks.
  • You want to keep using Tailwind, CSS Modules, or plain CSS instead of adopting another styling library.
    The README's What makes Astryx different section says styles can be overridden with className using Tailwind, CSS modules, or plain CSS.
  • You need brand themes and dark mode through CSS custom properties without forking component source.
    The README's Overview and Customize without wrapping sections describe brand-level theming, dark mode, and CSS custom property overrides.
  • Your team wants developers and AI assistants to use the same CLI, API, and documentation conventions.
    The README's Built for people and agents and One system for humans and AI sections explicitly describe this goal.

Skip it if you

  • Your application still runs on React 18 or earlier and cannot meet the React 19+ prerequisite.
    The README's Getting Started section states that Astryx requires React 19 or later.
  • You require a stable Vega/Vega-Lite chart wrapper or stable charts components.
    The README's Packages section states that @astryxdesign/vega and @astryxdesign/charts are published only under the @canary dist-tag and have no stable release.
  • You plan to install experimental components directly from @astryxdesign/lab.
    The README's Packages section states that @astryxdesign/lab is used for Storybook and the sandbox and is not published to npm.
  • Your production selection must avoid Beta projects and small maintainer groups.
    Project metadata lists 10 contributors and 5 releases, while the README marks the project as Currently in Beta.

Requirements

  • React 19 or later, with react and react-dom as peer dependencies of @astryxdesign/core.
  • Install @astryxdesign/core, @astryxdesign/theme-neutral, and @stylexjs/stylex.
  • For the project CLI, install @astryxdesign/cli as a development dependency.
  • Repository contribution requires Node 22+ on an active LTS line and pnpm 11.

First step (verbatim from README)

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex

Watch out

  • Direct global use of astryx can cause path errors; the README recommends adding a package.json script.
    The README's Getting Started section says npm run astryx -- component --list avoids path errors when AI assistants or new developers invoke the CLI directly.
  • Do not treat @astryxdesign/lab as an installable stable npm package.
    The README's Packages section states that @astryxdesign/lab is not published to npm.
  • Chart-related packages use @canary rather than a stable release, so their stability boundary differs.
    The README's Packages section states that @astryxdesign/vega and @astryxdesign/charts are published only under the @canary dist-tag.
  • The repository contribution environment is not a generic Node setup; it requires Node 22+ and pnpm 11.
    The README's Contributing section explicitly requires Node 22+ on an active LTS line and pnpm 11.

Not stated in the README

  • Browser support is not specified in the README.
  • The README does not provide the complete 150+ component list, package size, or runtime performance data.
  • The README does not specify version matrices for Next.js, Vite, or Tailwind integrations beyond mentioning them.
  • The README does not state a breaking-change policy or long-term support window for the Beta phase.
  • The README does not specify automated accessibility test coverage for the 150+ components.

💡 Deep Analysis

6
No I maintain a React 18 administration application and cannot upgrade to React 19 yet. Even if I only want Astryx table, form, and navigation components, can I integrate it according to the README?
For: A frontend team member maintaining a React 18 administration application that cannot upgrade React yet but wants to use a library of more than 150 TypeScript UI components

No, not directly. The README treats React 19 as a hard integration prerequisite rather than an optional recommendation.

  • Astryx requires React 19 or later.
  • @astryxdesign/core declares react and react-dom as peer dependencies, so React 18 does not satisfy the documented installation contract.
  • Tables, form workflows, and navigation are covered by Astryx Patterns, but using only a small subset of components does not remove the React version boundary.
  • The project is currently in Beta, and the README provides no React 18 compatibility package, downgrade adapter, or official migration path.

Therefore, limiting adoption to a few components is not a documented compatibility route. Whether the application can move to React 19 must be evaluated against its exact Next.js, build-tool, third-party component, and application dependencies; those migration impacts are not specified in the README.

  • README introduction: "Currently in Beta · Built on React 19+"
  • Getting Started: "Astryx requires React 19 or later"
  • Getting Started: "react and react-dom are peer dependencies of @astryxdesign/core"
  • Architecture: Patterns cover "table pages, detail page layouts, form wizards, navigation patterns, data entry flows"
Not stated in the README:The README does not describe any unofficial workaround for React 18.;It does not provide a migration checklist for existing dependencies and application code moving from React 18 to React 19.
No I am building a production React 19 data product whose critical pages depend on Vega, Vega-Lite, or Astryx charts. Because our team requires stable releases for production dependencies, can I adopt these packages as formal infrastructure now?
For: A data engineer building a production React 19 data product who needs Vega/Vega-Lite or Astryx charts for critical visualizations and requires stable released dependencies

No. These chart packages should not be treated as stable production infrastructure because the README explicitly states that they are available only through the canary channel and have no stable release.

  • @astryxdesign/vega is the Vega/Vega-Lite chart wrapper, while @astryxdesign/charts provides chart components.
  • Both are published only under the @canary dist-tag, and the README says, “there is no stable release yet.”
  • The project as a whole is also in Beta, so the experimental chart capabilities should not be equated with the stability of the core and theme packages.
  • The README separates experimental @astryxdesign/lab from published packages, showing that the project intentionally maintains a stability boundary.

If the requirement is limited to Astryx core UI, table pages, and data-entry workflows, core and stable themes may still be relevant while charts are sourced separately. The provided materials do not define canary API guarantees, upgrade policy, performance metrics, or production support scope.

  • README introduction: "Currently in Beta"
  • Packages: "@astryxdesign/vega ... and @astryxdesign/charts ... only under the @canary dist-tag"
  • Packages: "there is no stable release yet"
  • Packages: "@astryxdesign/lab (experimental components)"
Not stated in the README:The README does not specify API stability commitments, performance metrics, or production support for the canary chart packages.;It does not provide a migration strategy from the canary packages to a future stable release.
Yes I am building a large application with React 19 and Next.js, and the project already uses Tailwind. Can I adopt Astryx without migrating to StyleX or adding new PostCSS and Babel build configuration?
For: A frontend engineer building a large React 19 and Next.js web application with Tailwind, who wants to keep the existing styling system instead of adopting another styling library

Yes, Astryx fits this setup because its internal styling technology is separated from the consumer-facing integration, and the README explicitly covers React 19+, Next.js, and Tailwind.

  • React 19 or later is required, with react and react-dom declared as peer dependencies of core.
  • Astryx is authored with StyleX, but consumers can use className with Tailwind, CSS Modules, or plain CSS.
  • The normal integration uses prebuilt CSS, a theme package, and typed React components; no build plugin, PostCSS, or Babel configuration is required.
  • The README lists Next.js, Tailwind, Vite, and CDN usage in the full Quick Start guide.

The remaining qualification is that Astryx is still in Beta. The README does not provide a compatibility matrix for your exact Next.js or Tailwind versions, nor does it specify how every existing CSS specificity and loading-order conflict will behave.

  • Getting Started: "Astryx requires React 19 or later"
  • Overview: "Override with className using Tailwind, CSS modules, or plain CSS"
  • Getting Started: "no build plugin, no PostCSS or Babel config"
  • Getting Started: "full guide (Next.js, Tailwind, Vite, and CDN)"
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
Not stated in the README:The README does not specify a compatibility matrix for particular Next.js or Tailwind versions.;It does not document every conflict rule between an existing CSS cascade and Astryx theme variables.
Yes I am developing an enterprise product with React 19 and need brand-level theming, dark mode, and shared color and spacing variables. Can I customize Astryx without copying or wrapping component source?
For: A React 19 product engineer who needs unified brand colors, dark mode, and component visual tokens for an enterprise product while retaining seven ready-made themes as starting points

Yes. Astryx’s theming model is specifically designed for brand-level overrides and dark mode without requiring copied component source.

  • The README explicitly lists brand-level theming and dark mode as shipped capabilities.
  • A theme is defined as a set of CSS custom property overrides, which is suitable for centrally replacing visual tokens such as colors and spacing.
  • Seven ready-made themes are provided: neutral, butter, chocolate, matcha, stone, gothic, and y2k.
  • The “Customize without wrapping” principle says designers can change the visual identity without forking or wrapping component source.

The main README does not fully enumerate token names, coverage, the dark-mode switching API, or all CSS precedence rules. If the brand requirements exceed the exposed token system, className overrides or swizzling may still be necessary, and that would change the team’s maintenance responsibility.

  • Overview: "brand-level theming, dark mode"
  • What makes Astryx different: "A theme is a set of CSS custom property overrides"
  • Packages: "Seven ready-made, fully customizable themes (neutral, butter, chocolate, matcha, stone, gothic, y2k)"
  • What makes Astryx different: "Customize without wrapping"
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
Not stated in the README:The main README does not fully list theme variable names, coverage, or the dark-mode switching API.;It does not document every selector-precedence and load-order rule when business CSS and theme variables coexist.
Yes I lead a React 19 team whose code is edited by both AI coding assistants and new members. Can I make everyone use the same Astryx CLI, component conventions, and documentation entry point instead of relying on each machine’s global version?
For: A frontend lead whose React 19 product is built by both AI coding assistants and new team members, who wants a fixed project-local CLI version and searchable component documentation

Yes. Astryx treats its API, documentation, and CLI as one development entry point for both people and AI, and the README provides a project-local invocation pattern.

  • The project emphasizes shared tooling, APIs, naming, prop, and composition conventions for people and agents.
  • The CLI covers component documentation, component lists, templates, scaffolding, themes, and codemods, making it a common discovery and migration interface.
  • The README recommends adding the local CLI to package.json to avoid path errors when AI assistants or new developers invoke it directly.
  • Running the CLI from node_modules uses the project’s installed version, which is easier to keep consistent than relying only on a global installation.

However, the README does not define a CI version-locking policy, compatibility guarantees between CLI versions, or measured accuracy for AI-generated code. “Agent ready” is a design goal, not a quantified outcome guarantee.

  • Overview: "both people and AI assistants build with the same tooling"
  • Packages: the CLI provides "component docs, templates, scaffolding, themes, and codemods"
  • Getting Started: "For reliable CLI access, add a script to your package.json"
  • Getting Started: "This avoids path errors when AI assistants or new developers invoke the CLI directly"
npm run astryx -- component --list
Not stated in the README:The README does not specify how to lock the CLI version in CI or guarantee compatibility across CLI versions.;It provides no quantitative data on AI-generated code accuracy, rework rate, or team productivity.
It depends I use React 19 and TypeScript, and my product has interactions that the existing design system cannot cover. If I need to modify component internals directly, is Astryx swizzling more suitable than maintaining long-term wrappers and className overrides?
For: A frontend architect building a React 19 product with interactions that cannot be covered by the existing design system, but who still wants to start from Astryx’s accessible components and TypeScript APIs

It depends. When the requirement genuinely changes internal component behavior, swizzling provides a direct way to take ownership of the source. However, it also transfers upstream upgrades, accessibility fixes, and ongoing maintenance to your team.

  • Astryx components support open composition, with building blocks exported directly instead of exposing only a closed high-level API.
  • The README explicitly says that swizzle ejects a component’s full source into the project so the team can own and maintain it.
  • Components have full TypeScript support and are designed with accessibility in mind; after taking ownership, those benefits cannot be assumed to update automatically.
  • Astryx follows “guidance over enforcement”; for visual changes or composition, className, theme variables, and deeper composition may be lighter than a source fork.

Therefore, swizzling is reasonable when internal behavior must change, but it is not the default for brand styling or local layout changes. The README does not specify the swizzle command, generated directory, upgrade-diff tooling, or upstream merge workflow.

  • What makes Astryx different: "Open internals"
  • What makes Astryx different: "swizzle ejects a component's full source into your project to own"
  • Architecture: "150+ reusable UI building blocks with full TypeScript support"
  • Principles: "Guidance over enforcement"
Not stated in the README:The README does not provide the exact swizzle command, generated directory, or upgrade workflow after source ownership begins.;It does not explain how upstream accessibility or security fixes can be synchronized automatically after swizzling.

✨ Highlights

  • Provides 150+ accessible components with TypeScript support
  • Supports overrides with Tailwind, CSS Modules, and plain CSS
  • Uses CSS custom properties for brand-level themes and dark mode
  • The CLI, docs, and API target both developers and AI assistants
  • The project is currently in Beta, with Astryx v0.7.11 as the latest release

🔧 Engineering

  • Ships the core, cli, build, and seven theme-* packages
  • The CLI covers component docs, templates, scaffolding, themes, and codemods
  • swizzle ejects a component's full source into the project for ownership
  • Uses pre-built CSS and typed React components without a build plugin

⚠️ Risks

  • The project is explicitly marked Beta, with 5 releases and 10 contributors
  • @astryxdesign/lab is internal-only and is not published to npm
  • Vega and charts are available only under @canary, with no stable release
  • React 19+ is required, so older React projects do not meet the stated prerequisite

👥 For who?

  • Product teams using React 19+ that need a TypeScript component library
  • Frontend teams that want to keep using Tailwind or CSS Modules for styling
  • Application teams needing brand themes, dark mode, and 150+ components
  • Teams wanting AI assistants to reuse the CLI, API, and documentation conventions