What Are the Dependencies for Astryx? Complete Dependency Breakdown

Astryx dependencies include React 18, StyleX 0.17.5, pnpm 8, TypeScript 5, Vite 5, Vitest 1, Radix UI primitives, and workspace-linked internal packages, organized across a pnpm monorepo with dedicated package.json files per workspace.

Astryx is Facebook's React component library built on StyleX for styling. Understanding what Astryx depends on requires examining its pnpm monorepo structure, where each workspace package declares its own dependencies in individual package.json files while sharing dev tools through the root configuration.

Root Package Dependencies

The root package.json declares shared development dependencies that power the entire monorepo. These tools ensure consistency across all workspace packages.

Dependency	Version	Purpose
pnpm	^8	Workspace-aware package manager with hoisting
TypeScript	^5	Strong typing across all packages
Vite	^5	Dev server and bundler for examples and Storybook
Vitest	^1	Unit testing framework used by all packages
ESLint	^9	Linting with Astryx coding standards
Prettier	^3	Code formatting consistency
React / React-DOM	^18	Foundation for the component library

The root also declares workspace dependencies using workspace:* protocol, including @astryxdesign/cli for CLI utilities.

Source: [package.json](https://github.com/facebook/astryx/blob/main/package.json)

Core Package Dependencies (packages/core)

The core component package contains the bulk of Astryx's runtime dependencies. These power the actual UI components that consumers install.

Runtime Dependencies

• React / React-DOM ^18 — UI library foundation
• stylex workspace:* — Internal styling DSL that generates CSS variables and static class names
• @astryxdesign/cli workspace:* — Component authoring helpers
• @radix-ui/react- ^1* — Accessible primitives for popovers, dialogs, and other complex interactions
• clsx ^2 — Conditional class name utility
• lodash.merge ^4 — Deep merging of theme objects

Source: [packages/core/package.json](https://github.com/facebook/astryx/blob/main/packages/core/package.json)

Theme Package Dependencies (packages/themes/*)

Each theme package (Stone, Neutral, etc.) contains StyleX-based token definitions with minimal dependencies:

• stylex — Generates CSS variables and static class names
• @astryxdesign/core — Pulls in base component tokens for theme overrides

Example: [packages/themes/stone/package.json](https://github.com/facebook/astryx/blob/main/packages/themes/stone/package.json)

CLI Package Dependencies (packages/cli)

The @astryxdesign/cli package provides the astryx command-line utilities with these dependencies:

• commander — Command-line argument parsing
• chalk — Colored terminal output
• execa — Running child processes (pnpm, Vite)
• dotenv — Loading optional .env files for local development

Source: [packages/cli/package.json](https://github.com/facebook/astryx/blob/main/packages/cli/package.json)

Testing and Internal Tooling Dependencies

Astryx maintains several internal packages with focused dependency sets:

Package	Purpose	Key Dependencies
@astryxdesign/vibe-tests	Visual regression testing	Vitest, Playwright
@astryxdesign/eslint-plugin-astryx	Custom lint rules	ESLint 9
@astryxdesign/internal-test-utils	Shared test helpers	Vitest utilities

Example: [internal/vibe-tests/package.json](https://github.com/facebook/astryx/blob/main/internal/vibe-tests/package.json)

Workspace Configuration

The pnpm workspace definition in pnpm-workspace.yaml tells pnpm to treat folders under packages/*, apps/*, and internal/* as separate packages while hoisting shared dependencies to the root:

# pnpm-workspace.yaml structure

packages:
  - 'packages/*'
  - 'apps/*'
  - 'internal/*'

Source: [pnpm-workspace.yaml](https://github.com/facebook/astryx/blob/main/pnpm-workspace.yaml)

How Astryx Dependencies Work in Practice

Importing Core Components

import { Button } from '@astryxdesign/core';
import { stylex } from '@stylexjs/stylex';

export default function Example() {
  return (
    <Button
      className={stylex({ padding: '12px', backgroundColor: 'var(--color-primary)' })}
    >
      Click me
    </Button>
  );
}

Using Theme Tokens

import { useTheme } from '@astryxdesign/core';
import { stylex } from '@stylexjs/stylex';

export function ThemedCard() {
  const theme = useTheme(); // pulls tokens from the active theme package

  return (
    <div
      className={stylex({
        backgroundColor: theme.colors.surface,
        borderRadius: theme.radii.md,
        padding: theme.spacing[4],
      })}
    >
      Themed content
    </div>
  );
}

Running the CLI

# Generate a new component scaffold

pnpm -F @astryxdesign/cli run astryx component Button --dense

Summary

• Astryx is a pnpm monorepo with dependencies declared per-workspace in individual package.json files
• Root dependencies include pnpm 8, TypeScript 5, Vite 5, Vitest 1, ESLint 9, and Prettier 3
• Core runtime dependencies center on React 18, StyleX 0.17.5, and Radix UI primitives
• Theme packages depend only on StyleX and the core package for token inheritance
• CLI tooling uses Commander, Chalk, Execa, and dotenv for developer experience
• Workspace linking via workspace:* protocol ensures version consistency across internal packages

Frequently Asked Questions

What package manager does Astryx use?

Astryx uses pnpm ^8 as its workspace-aware package manager. The pnpm-workspace.yaml file defines the monorepo structure, and pnpm's hoisting capabilities deduplicate shared dependencies across all workspace packages.

Is StyleX a required dependency for using Astryx?

Yes. StyleX is the core styling engine for Astryx. The core package declares stylex as a workspace:* dependency, and all theme packages also depend on it for generating CSS variables and static class names. StyleX tokens power every component's visual appearance.

Can I use Astryx components without the CLI?

Yes. The @astryxdesign/cli package is optional for consumers. You can install @astryxdesign/core and theme packages directly via npm/pnpm/yarn. The CLI primarily provides scaffolding, documentation generation, and internal development workflows.

What testing tools does Astryx depend on?

Vitest ^1 for unit testing across all packages, plus Playwright for visual regression testing in the @astryxdesign/vibe-tests package. These are declared as dev dependencies in the respective workspace package.json files.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}