# astryx | Meta | Knowledge Base | Instagit

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

GitHub Stars: 2.7k

Repository: https://github.com/facebook/astryx

---

## Articles

### [How the @media (hover: hover) Guard Works for Hover Styles in Astryx](/facebook/astryx/how-does-the-media-hover-hover-guard-work-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.

- Tags: deep-dive
- Published: 2026-07-02

### [Understanding the `tokens.stylex` Typed Import in Astryx: Type-Safe Design Tokens](/facebook/astryx/what-is-the-tokens-stylex-typed-import-and-how-does-it-function)

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.

- Tags: deep-dive
- Published: 2026-07-02

### [How to Use the Astryx Template Command to Generate Page Skeletons](/facebook/astryx/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.

- Tags: how-to-guide
- Published: 2026-07-02

### [xstyle vs className vs style Props in Astryx Components: The Complete Guide](/facebook/astryx/what-is-the-difference-between-xstyle-classname-and-style-props-in-astryx-components)

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.

- Tags: deep-dive
- Published: 2026-07-02

### [How Dark Mode Functions with the Astryx Theme System](/facebook/astryx/how-does-dark-mode-function-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.

- Tags: deep-dive
- Published: 2026-07-02

### [How the Astryx Upgrade Command Runs Version Migration Codemods](/facebook/astryx/what-is-the-astryx-upgrade-command-and-how-it-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.

- Tags: internals
- Published: 2026-07-02

### [How to Use the Astryx Swizzle Command to Eject Component Source Code](/facebook/astryx/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.

- Tags: how-to-guide
- Published: 2026-07-02

### [Anti-Patterns to Avoid When Using the Astryx Design System: 10 Critical Mistakes](/facebook/astryx/what-are-the-anti-patterns-to-avoid-when-using-the-astryx-design-system)

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

- Tags: best-practices
- Published: 2026-07-02

### [How the Compound Component Pattern Works in Astryx Dialog Components](/facebook/astryx/how-does-the-compound-component-pattern-work-in-astryx-components-like-dialog)

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

- Tags: deep-dive
- Published: 2026-07-02

### [What Are Astryx Design Tokens and How to Use Them](/facebook/astryx/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.

- Tags: how-to-guide
- Published: 2026-07-02

### [Astryx XDS CLI Commands: Complete Usage Guide and Reference](/facebook/astryx/what-are-the-astryx-xds-cli-commands-and-their-usage)

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.

- Tags: how-to-guide
- Published: 2026-07-02

### [Available Astryx Theme Packages and How to Switch Them](/facebook/astryx/what-are-the-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.

- Tags: how-to-guide
- Published: 2026-07-02

### [How the Astryx Theme Provider Handles Runtime vs Pre‑built CSS](/facebook/astryx/how-does-astryx-theme-provider-work-with-runtime-vs-pre-built-css)

Discover how the Astryx Theme Provider manages runtime and pre-built CSS. Learn asset injection for dynamic themes versus attribute synchronization for CLI-compiled ones.

- Tags: internals
- Published: 2026-07-02

### [How to Configure Astryx Build Plugins for Vite, Babel, and PostCSS](/facebook/astryx/how-to-configure-astryx-build-plugins-for-vite-babel-and-postcss)

Learn how to configure Astryx build plugins for Vite Babel and PostCSS. Integrate seamlessly into your workflow with StyleX for efficient styling and custom CSS.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Generate AI Agent Documentation with `astryx init --features agents`](/facebook/astryx/how-to-generate-ai-agent-docs-with-astryx-init)

Generate AI agent documentation with astryx init --features agents. Quickly create component indexes, behavioral rules, and CLI references for AI coding assistants.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Access Astryx Component Documentation via CLI and API](/facebook/astryx/how-to-access-astryx-component-documentation-cli-api)

Access Astryx component documentation easily via CLI or API. Learn how to retrieve typed JSON or human-readable output for your components using the shared component function.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Configure XDSLinkProvider for Astryx React Router Integration](/facebook/astryx/how-to-configure-xdslinkprovider-for-astryx-react-router)

Configure XDSLinkProvider for Astryx React Router integration by wrapping your app with LinkProvider and passing your React Router Link component to enable seamless client-side navigation.

- Tags: how-to-guide
- Published: 2026-07-02

### [How Astryx Developers Handle Stable Error Codes: A Complete Guide to ERR_UNKNOWN_COMPONENT](/facebook/astryx/how-to-handle-astryx-error-codes-err-unknown-component)

Learn how Astryx developers master ERR_UNKNOWN_COMPONENT. Discover their strategy for stable error code handling using machine-readable codes for robust API and CLI integration. Get the complete guide.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Discover External Packages Compatible with Astryx Using the `discover` Command](/facebook/astryx/how-to-discover-external-packages-with-astryx-discover)

Automatically discover Astryx compatible external packages for your project. Run xds discover to list packages, versions, and metadata for seamless integration.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Override Astryx Component Styles Using Tailwind or Custom CSS](/facebook/astryx/how-to-override-astryx-component-styles-with-tailwind-css)

Easily override Astryx component styles with Tailwind or custom CSS. Learn how to apply your own className to customize Astryx elements for your project.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use Astryx Page Templates for Common Layout Patterns](/facebook/astryx/how-to-use-astryx-page-templates-for-layouts)

Learn how to use Astryx page templates to quickly scaffold common layouts like dashboards, tables, forms, and login screens, saving you development time.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Search Across Astryx Components, Hooks, and Docs Using the CLI](/facebook/astryx/how-to-search-astryx-components-hooks-docs-cli)

Easily search Astryx components, hooks, and docs via the CLI with astryx search <query>. Discover relevant results with built-in scoring and filtering.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the Astryx Doctor Command to Diagnose Setup Issues](/facebook/astryx/how-to-use-astryx-doctor-command-for-setup-diagnostics)

Diagnose Astryx setup issues with the doctor command. Run health checks on your Node environment, package installation, and config files.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to File Gap Reports for Missing Features in Astryx Components](/facebook/astryx/how-to-file-gap-reports-for-astryx-components)

Easily file gap reports for missing Astryx features using the built-in CLI command. Record issues via interactive prompt or JSON API for seamless development.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Compile Astryx Themes to Production CSS Using the Theme Build Command](/facebook/astryx/how-to-compile-astryx-themes-to-production-css)

Compile Astryx themes to production CSS with the theme build command. Learn how to use npx astryx theme build <slug> for minified CSS bundles.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the useScrollOverflow Hook in Astryx for Scroll Detection](/facebook/astryx/how-to-use-astryx-useoverflow-hook-for-scroll-detection)

Master scroll detection with Astryx's useScrollOverflow hook. Track horizontal scroll boundaries effortlessly and enhance user experience in your React applications.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the useFocusTrap Hook for Accessibility in Astryx](/facebook/astryx/how-to-use-astryx-usefocustrap-hook-for-accessibility)

Learn how to use the useFocusTrap hook in Astryx to enhance accessibility for keyboard users by trapping focus within modals and popovers.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the useMediaQuery Hook in Astryx for Responsive Breakpoints](/facebook/astryx/how-to-use-astryx-usemediaquery-hook)

Learn to use the Astryx useMediaQuery hook for responsive breakpoints in React. Get automatic updates for viewport changes and ensure hydration-safe SSR with serverDefault.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Create and Build Custom Astryx Themes Using the `defineTheme` Function](/facebook/astryx/how-to-create-build-custom-themes-with-astryx-definetheme)

Learn to build custom Astryx themes with the defineTheme function. Inject themes at runtime or pre-compile for production static CSS. Elevate your Astryx application's look and feel.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the Astryx JSON API Programmatically for AI Agent Integration](/facebook/astryx/how-to-use-astryx-json-api-for-ai-agent-integration)

Integrate AI agents with the Astryx JSON API. Learn to parse responses, handle errors, and discover capabilities programmatically for seamless AI agent integration. Explore the Astryx API now.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Implement Dark Mode Support in Astryx Theming](/facebook/astryx/how-to-implement-dark-mode-in-astryx-theming)

Learn how to implement dark mode in Astryx theming using XDSTheme provider and CSS custom properties. Apply dark or light themes easily.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Integrate Astryx with Next.js Using Build Plugins](/facebook/astryx/how-to-integrate-astryx-with-nextjs-build-plugins)

Learn to integrate Astryx with Next.js using build plugins. Configure Babel and PostCSS, and use the withAstryx helper for seamless StyleX transpilation. Get started today!

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Configure the Astryx CLI Using astryx.config.mjs for Custom Templates](/facebook/astryx/how-to-configure-astryx-cli-with-custom-templates)

Learn to configure Astryx CLI using astryx.config.mjs. Set up custom templates with integrations and local layout components. Customize your project workflow now.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Use the Swizzle Command to Eject and Modify Astryx Component Source Code](/facebook/astryx/how-to-eject-astryx-component-source-code-with-swizzle)

Learn to eject and modify Astryx component source code using the swizzle command. Edit JSX, styling, and props directly by copying source files into your local project.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Customize Theme Colors and Tokens in the Astryx Design System](/facebook/astryx/how-to-customize-astryx-theme-colors-and-tokens)

Customize Astryx design system theme colors and tokens using ThemeProvider or the xds theme add CLI command. Learn how to efficiently manage your Astryx project's visual identity.

- Tags: how-to-guide
- Published: 2026-07-02