Build fully customizable, agent-ready design systems with Astryx — Meta's production design system now open source. Ships 150+ React components built on StyleX with zero styling lock-in, component swizzling, brand theming, dark mode, and CLI tooling. Use when building component libraries, design systems, UI applications, design tokens, or when teams need consistent accessible components that AI agents can understand and extend. Triggers on: astryx, design system, component library, design tokens, react components, accessible components, astryx design, stylesheets, theme customization, component composition.
Build fully customizable, agent-ready design systems with Astryx — Meta's production design system now open source. Ships 150+ React components built on StyleX with zero styling lock-in, component swizzling, brand theming, dark mode, and CLI tooling. Use when building component libraries, design systems, UI applications, design tokens, or when teams need consistent accessible components that AI agents can understand and extend. Triggers on: astryx, design system, component library, design tokens, react components, accessible components, astryx design, stylesheets, theme customization, component composition.
Universal — React 18+ and Node 22+ on active LTS. Works across all coding agents (Claude Code, Codex, Gemini CLI, OpenCode, Cursor, Copilot, jeopi, jeo). Astryx is agent-ready: all components are exported at the base level for full composability (no locked top-level API). Integrates with: `deep-agents-core` for agent-driven component design, `responsive-design` for layout verification, `react-best-practices` for component performance optimization, `react-grab` for UI element context capture. Upstream: https://github.com/facebook/astryx (MIT).
Astryx is an open source design system built
and proven at Meta over 8+ years across 13,000+ apps. It ships 150+ accessible
React components, brand-level theming, dark mode, templates, and a CLI — all
designed for how teams build now: by people and the agents working alongside them.
Built on React and StyleX, Astryx
emphasizes open internals (no closed top-level API, full component composability),
zero styling lock-in (bring your own CSS, no special build plugin), and agent
readiness (components exported at the base level so AI assistants understand and
extend them).
Currently in Beta
When to use this skill
You're building or scaling a component library and want production-proven
patterns from Meta
You need 150+ accessible, ready-to-ship React components with dark mode,
theming, and templates
Your design system must support both human and AI co-creation — agents need
to understand, modify, and extend components safely
You want zero styling lock-in — bring your own CSS framework (Tailwind,
emotion, vanilla CSS) without fighting a design system build plugin
You need component swizzling — ability to eject a component's full source
into your project to customize without forking the library
Your team values open internals and composability over a locked top-level API
You want to leverage Meta's 8+ years of design system evolution across 13,000+
applications
When NOT to use this skill
Building a simple one-off application (use Shadcn, Mantine, or MUI directly)
Headless-only needs (no styled components required) — route to component
architecture patterns
Non-React projects — Astryx is React-only; route to design token tools
Quick prototype that won't outlive a quarter
Quick Start
Step 1 — Install Astryx into your project
# Install the core package (React 18+ required)
npm install @astryxdesign/core
# Install the CLI for scaffolding and setup
npm install --save-dev @astryxdesign/cli
# Install the build utilities (optional, for custom builds)
npm install --save-dev @astryxdesign/build
Astryx requires Node 22+ on an active LTS line and pnpm 11+ (or enable
Corepack):
Dark mode responds to system preference automatically.
Step 4 — Customize with swizzling
When you need to eject a component and own its implementation:
# Eject a component's full source into your project
astryx swizzle Button --path src/components/Button
# Now you can modify Button.tsx without forking the library
The ejected component is fully yours — customizations survive library upgrades.
Step 5 — Use templates for common patterns
Astryx ships ready-to-ship templates for common UI patterns:
# List available templates
astryx templates list
# Scaffold a form template
astryx templates create form --name MyForm
# Scaffold a data table
astryx templates create table --name MyDataTable
Core Concepts
Open Internals
Astryx exports primitives and building blocks at the base level, not locked
behind a closed top-level API. This means:
You can compose Button, Icon, Loader, Tooltip freely in any combination
AI agents understand the component structure and can modify safely
You're never fighting a framework-imposed constraint
Contrast: many design systems lock you into their compound component structure.
Astryx lets you build compound components yourself when you need them.
Zero Styling Lock-in
Astryx ships pre-built CSS using StyleX, but you're free to:
Replace styling entirely with Tailwind CSS utilities
Mix Astryx components with your own CSS framework
Override component styles via CSS modules or emotion
Use Astryx as a component anatomy reference while building your own styles
No build plugin required. No styling library forced into your bundle.
Agent Readiness
Every component is designed for AI co-creation:
Flat export structure (agents find components without traversing nested APIs)
Consistent prop naming and typing across all components
TypeScript-first, so type definitions guide agent code generation
Returns: component name, source file, line number, HTML structure.
Common Tasks
Task 1: Create a new component using Astryx patterns
# Generate a new component scaffold
astryx generate component MyCard
# Or use the CLI directly
npx @astryxdesign/cli component --name MyCard --destination src/components
Task 2: Customize an existing component
# Swizzle (eject) the Button component
astryx swizzle Button
# Edit src/components/Button.tsx as needed# Your customizations survive library upgrades
A: Check that prefers-color-scheme media query is supported in your browser.
Use window.matchMedia('(prefers-color-scheme: dark)').matches for detection.
Q: Swizzled component not updating when library version bumps
A: Swizzled components are frozen at the time of ejection. You own all future
updates. Watch the upstream repo for breaking changes you may want to backport.
