astryx

An open source design system that's fully customizable and agent ready

35 articles

How the @media (hover: hover) Guard Works for Hover Styles in Astryx

Learn how Astryx uses @media (hover: hover) to apply :hover styles only on devices with true hover support, avoiding confusion on touchscreens.

deep-dive

Jul 2, 2026

Understanding the `tokens.stylex` Typed Import in Astryx: Type-Safe Design Tokens

Learn about the tokens.stylex typed import in Astryx. Access design tokens as CSS custom properties with StyleX defineVars for compile-time type checking in your design system.

deep-dive

Jul 2, 2026

How to Use the Astryx Template Command to Generate Page Skeletons

Learn to use the Astryx template command to effortlessly generate page skeletons and view spatial annotations without writing files. Streamline your development workflow today.

how-to-guide

Jul 2, 2026

xstyle vs className vs style Props in Astryx Components: The Complete Guide

Master Astryx styling with xstyle className and style props. Understand compile-time StyleX objects arbitrary CSS class strings and inline React objects to optimize your component styling.

deep-dive

Jul 2, 2026

How Dark Mode Functions with the Astryx Theme System

Discover how Astryx theme system implements dark mode efficiently. Learn how it resolves at runtime to support CSS and JS consumers without double renders.

deep-dive

Jul 2, 2026

How the Astryx Upgrade Command Runs Version Migration Codemods

Learn how the Astryx upgrade command automates version migration codemods. It detects your Astryx version, finds codemod transforms, and applies them to your source code.

internals

Jul 2, 2026

How to Use the Astryx Swizzle Command to Eject Component Source Code

Easily eject component source code from the Astryx library using the swizzle command. Customize JSX, styling, and props by copying source files directly into your project.

how-to-guide

Jul 2, 2026

Anti-Patterns to Avoid When Using the Astryx Design System: 10 Critical Mistakes

Learn 10 critical anti-patterns to avoid with the Astryx design system. Discover how to leverage StyleX features for optimal performance and theme consistency.

best-practices

Jul 2, 2026

How the Compound Component Pattern Works in Astryx Dialog Components

Learn how Astryx uses the compound component pattern for Dialog components. Access shared internal state via React context for a stable API.

deep-dive

Jul 2, 2026

What Are Astryx Design Tokens and How to Use Them

Discover Astryx design tokens, CSS custom properties from StyleX, that centralize your design system for consistent theming. Learn how to implement colorVars and spacingVars.

how-to-guide

Jul 2, 2026

Astryx XDS CLI Commands: Complete Usage Guide and Reference

Master Astryx XDS CLI commands with this complete usage guide. Explore 17+ sub-commands for documentation, theming, scaffolding, and diagnostics. Integrate programmatically with JSON API support.

how-to-guide

Jul 2, 2026

Available Astryx Theme Packages and How to Switch Them

Discover the seven Astryx theme packages like Y2K, Stone, and Matcha. Learn how to easily install and switch between these themes using the XDSTheme provider in your React app.

how-to-guide

Jul 2, 2026

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how facebook/astryx works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →