Astryx Design System

Meta's open-source React design system, built for people and agents: 150+ accessible components, brand-level theming, templates, CLI/docs, and StyleX-authored internals hidden behind ordinary package consumption.

Routing Summary

Use Astryx when the project needs a complete, agent-readable React design-system substrate: accessible components, themes, templates, CLI docs, and conventions that agents can follow from disk. Treat it as a reference or adoption candidate, not an automatic visual style.

What it is

Astryx is an open-source design system from Meta. The repo README says it grew inside Meta over eight years, powers 13,000+ apps internally, and now ships as React packages with 150+ accessible components, themes, templates, and CLI tooling. Its internals are authored with StyleX, but consumers import CSS and typed React components without adopting StyleX or a build plugin.

The important part for Kevin is the agent interface. Astryx is explicitly "agent ready": the docs, CLI, conventions, templates, and component API are shaped so humans and AI assistants operate from the same source of truth. The Japanese bookmark called out this novelty directly: the design system includes operating context for AI tools, so agents can assemble UI correctly rather than guessing from screenshots.

Version Snapshot

Source: exact GitHub repository, release, README, npm metadata, and published tarballs captured 2026-08-11

Install Shape

npm install @astryxdesign/core@0.3.0 @astryxdesign/theme-neutral@0.3.0 @stylexjs/stylex@^0.19.0
npm install -D @astryxdesign/cli@0.3.0

The README recommends adding a stable script so agents and new developers invoke the CLI reliably:

{
  "scripts": {
    "astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
  }
}

The launch post's “without dependencies” line is not a literal package claim. Astryx avoids a required build plugin and does not force consumers to author with StyleX, but core@0.3.0 has React, React DOM, and StyleX peers plus intl-messageformat; theme-neutral@0.3.0 depends on lucide-react; and the CLI has its own dependencies. Route from the exact package manifest, never the launch shorthand.

Adoption Contract

Astryx remains a project-specific candidate, not a global install. Before adoption:

1. Confirm React 19 compatibility and pin one stable Astryx version across core, CLI, themes, and integrations. Do not build against main or a canary by accident.
2. Install in an isolated branch or fixture and run astryx doctor. For an existing Astryx app, read the release notes and run astryx upgrade before manual fixes; 0.3.0 contains breaking authoring and accessibility API changes plus codemods.
3. Prove a bounded representative set: navigation, forms, menu/dialog, table, loading/async action, dark theme, RTL, SSR or hydration, reduced motion, keyboard-only use, forced colors, and screen-reader names.
4. Measure CSS and JavaScript cost in the target app. “No build plugin” is not “no runtime or bundle cost.”
5. Preserve local tokens and product identity. Adopt behaviors and agent-readable contracts only where they beat the existing project substrate.
6. Record the exact package versions, tarball integrity, license, test receipt, rollback, and owner in the project decision. No proof means reference-only.

Why it matters

Astryx is not just another component catalog. It is evidence for the direction Kevin wants design systems to move:

• source-owned components with accessible behavior
• theme customization through CSS variables
• documented conventions that agents can follow
• CLI-accessible component docs and templates
• swizzle/eject paths when ownership matters
• typed React APIs that reduce ambiguous UI generation

That makes it a reference for AI-Native Design Patterns and DESIGN.md even when the project does not adopt Astryx.

Routing

Visual Artifact Notes

The local bookmark images show the core product promise: large blue Astryx mark, accessible product UI examples, theme cards, 150+ component claim, templates, and an agent-facing prompt card. The visual style is clean, bright, product-focused, and slightly playful. Treat it as a design-system reference, not an automatic house style.

Agent Rules

• Treat Astryx as beta until project compatibility is verified.
• Use official package versions and docs, not social screenshots, as version authority.
• Distinguish stable release, canary, and moving main; never cite one as another.
• Do not mix Astryx with shadcn/Kumo for the same base primitive family in a single screen.
• If using the CLI, add a package script so agents call the same entrypoint.
• Keep the Astryx package family aligned and use astryx upgrade plus regression proof for release changes.
• If only studying Astryx, extract the agent-ready design-system lessons into local DESIGN.md, token docs, and component docs.

---

Timeline

• 2026-08-11 | Replayed the original launch source against exact current artifacts. Registered design:astryx; advanced the stable snapshot to 0.3.0; separated stable, canary, and main; corrected the StyleX peer and CLI path; qualified the launch's dependency claim; and added an evidence-gated adoption contract. Published tarballs matched npm SHA-1 metadata. Source: X/@Astryxdesign, 2026-06-24; GitHub facebook/astryx at 9b5eaa0; GitHub release v0.3.0; npm @astryxdesign/*@0.3.0, captured 2026-08-11
• 2026-07-04 | Deep-reviewed the text-only Meta component-library bookmark and refreshed source authority: @astryxdesign/core, @astryxdesign/cli, and @astryxdesign/theme-neutral moved from 0.1.1 to 0.1.3; main is 73bcac9ab899432ab409edec127e58c6c973d87e. Source: X/@mellyeliu, 2026-06-25; Source: npm/GitHub, 2026-07-04
• 2026-06-29 | Promoted Astryx out of hub-only bookmark notes into a dedicated component/design-system page with package/release snapshot and visual artifact review. Source: User request, 2026-06-29; GitHub facebook/astryx; npm @astryxdesign/*
• 2026-06-26 | Seikei Kin bookmark highlighted Astryx as a Meta design system for the AI era with context files / operating structure for AI tools. Source: X/@seikei_kin, 2026-06-26
• 2026-06-24 | Astryx launch bookmark described the system as AI-fluent, customizable, dependency-light, with 150+ accessible components, brand theming, templates, and CLI. Source: X/@Astryxdesign, 2026-06-24