{"slug": "facebook-astryx", "title": "Facebook/Astryx", "summary": "Meta has open-sourced Astryx, a design system used internally for eight years that powers over 13,000 apps. The system provides 90+ accessible, themeable React components and is designed for both human developers and AI agents, featuring a CLI and MCP server for agent interaction.", "body_md": "An open source design system that's fully customizable and agent ready.\n\nAstryx is an open source design system born from years of building internal tools at scale in Meta's monorepo. It has grown inside Meta over the last eight years and powers over 13,000 apps, shaped by the engineers, designers, and product teams who depend on it every day.\n\nIt provides the foundations, components, templates, and themes that work together to deliver consistent, accessible interfaces — and it's designed so both humans and AI agents can build with the same tooling.\n\n**What makes Astryx different:**\n\n**Open internals:** All primitives are exported and composable, not hidden. Compose at any level and build exactly what you need.**Automatic spacing:** Context-aware spacing compensation eliminates \"double padding\" issues so layouts stay clean without manual fixups.**Themeable:** First-class theming with a CSS variable cascade. Ten ready-made themes, all fully customizable.**Agent ready:** JSDoc annotations with composition hints, plus a CLI and MCP server so agents can scaffold, browse, and document using the same API you do.\n\nFor full setup instructions, see the ** @astryxdesign/core README**.\n\nQuick install:\n\n```\n# pnpm\npnpm add @astryxdesign/core @astryxdesign/theme-neutral\npnpm add -D @astryxdesign/cli\n\n# npm\nnpm install @astryxdesign/core @astryxdesign/theme-neutral\nnpm install -D @astryxdesign/cli\n\n# yarn\nyarn add @astryxdesign/core @astryxdesign/theme-neutral\nyarn add -D @astryxdesign/cli\n```\n\nFor reliable CLI access, add this script to your `package.json`\n\n:\n\n```\n\"scripts\": {\n  \"xds\": \"node node_modules/@astryxdesign/cli/bin/astryx.mjs\"\n}\n```\n\nThen use the CLI as `npm run xds -- component --list`\n\n. This avoids path errors when AI assistants or new developers invoke the CLI directly.\n\nThen follow the [setup guide](/facebook/astryx/blob/main/packages/core/README.md#quick-start) to import styles, configure the theme provider, and start using components.\n\n| Package | Description | README |\n|---|---|---|\n`@astryxdesign/core` |\n\n[README](/facebook/astryx/blob/main/packages/core/README.md)`@astryxdesign/cli`\n\n[README](/facebook/astryx/blob/main/packages/cli/README.md)`@astryxdesign/build`\n\n[README](/facebook/astryx/blob/main/packages/build/README.md)`@astryxdesign/theme-*`\n\n[README](/facebook/astryx/blob/main/packages/themes)\n\n`@astryxdesign/lab`\n\n(experimental components) and`@astryxdesign/vega`\n\n(Vega/Vega-Lite chart wrapper) are used internally for Storybook and the sandbox; they are not yet published to npm.\n\n**Over 90 components**— accessible, themeable React components with built-in spacing, dark mode, and flexible styling.** Themes that fit your brand**— fully customizable themes ready for use. Make it yours without starting from scratch.** Ready to ship templates**— production-ready templates for common pages; just plug in your content.** A design system your agent can use**— scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line or MCP.\n\n**Design for speed:** Foundations you can trust, speed you can feel. Teams stop reinventing the basics and start shipping the ideas that matter.**Built by the people who use it:** The system gets sharper when we put it to work in the real world. Using it in context strengthens the whole system for everyone.**Ready for what's next:** Opinionated foundations paired with flexible patterns so your system keeps pace, no matter how the craft evolves.\n\nThe building blocks for visually cohesive and accessible interfaces: typography, color, layout, and accessibility.\n\nA library of 90+ reusable UI building blocks with full TypeScript support.\n\nBattle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns, data entry flows.\n\n| Directory | Purpose |\n|---|---|\n`apps/` |\nExample apps, the docsite, and Storybook |\n`packages/` |\nPublished packages: core, cli, build, themes |\n`internal/` |\nInternal tooling: test utilities, eslint plugin, vibe tests |\n\nWe welcome contributions! See ** CONTRIBUTING.md** for the full guide.\n\nQuick start for contributors: this repo uses **pnpm 10** via [Corepack](https://nodejs.org/api/corepack.html). Enable it once and the right pnpm version installs automatically:\n\n```\ncorepack enable\npnpm install\n```\n\nMIT", "url": "https://wpnews.pro/news/facebook-astryx", "canonical_source": "https://github.com/facebook/astryx", "published_at": "2026-06-26 04:54:49+00:00", "updated_at": "2026-06-26 05:04:54.117760+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents"], "entities": ["Meta", "Astryx", "React", "npm", "Storybook", "Vega", "Vega-Lite"], "alternates": {"html": "https://wpnews.pro/news/facebook-astryx", "markdown": "https://wpnews.pro/news/facebook-astryx.md", "text": "https://wpnews.pro/news/facebook-astryx.txt", "jsonld": "https://wpnews.pro/news/facebook-astryx.jsonld"}}