# What Are the Dependencies for Astryx? Complete Dependency Breakdown

> Discover the complete Astryx dependencies including React 18, StyleX 0.17.5, and pnpm 8. Understand the full breakdown for this Vite-powered monorepo project.

- Repository: [Meta/astryx](https://github.com/facebook/astryx)
- Tags: api-reference
- Published: 2026-08-03

---

**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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/package.json) files while sharing dev tools through the root configuration.

## Root Package Dependencies

The root [`package.json`](https://github.com/facebook/astryx/blob/main/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)](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)](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)](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)](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)](https://github.com/facebook/astryx/blob/main/internal/vibe-tests/package.json)

## Workspace Configuration

The **pnpm workspace definition** in [`pnpm-workspace.yaml`](https://github.com/facebook/astryx/blob/main/pnpm-workspace.yaml) tells pnpm to treat folders under `packages/*`, `apps/*`, and `internal/*` as separate packages while hoisting shared dependencies to the root:

```yaml

# pnpm-workspace.yaml structure

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

```

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

## How Astryx Dependencies Work in Practice

### Importing Core Components

```tsx
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

```tsx
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

```bash

# 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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/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`](https://github.com/facebook/astryx/blob/main/package.json) files.