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: GitHub API, npm registry, Astryx README, 2026-07-04

Install Shape

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

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

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

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.
• 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.
• If only studying Astryx, extract the agent-ready design-system lessons into local DESIGN.md, token docs, and component docs.

---

Timeline

• 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