Astryx: Meta's Open Source Design System with 150+ Components, Customizable and AI-Agent Ready

Meta has open-sourced Astryx, a design system built on React and StyleX with over 150 components. Currently in beta, it's already powering more than 13,000 apps internally at Meta, shaped over eight years by engineers, designers, and product teams.
Key Features from the Source
- Component count: 150+ accessible, themeable React components with built-in spacing, dark mode, and flexible styling.
- CLI & MCP support: Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line or via the Model Context Protocol (MCP).
- Customizable theming: Start with ready-to-use themes and adapt without starting from scratch.
- Production-ready templates: Templates for common pages — just plug in your content.
- Built with StyleX: Meta's own CSS-in-JS solution, now open source as well, providing zero-runtime styling.
Practical Details from the Site
The landing page demonstrates a full e-commerce UI: inventory management with filters (categories, locations, tags), a live chat agent that handles order tracking and returns, a shopping cart with shipping methods, and a revenue dashboard. The design system includes components like Badge, Checkbox, Switch, Buttons, Cards, and more, all visible in the component explorer.
The CLI can be used to generate themes and scaffold projects. For agent integration, Astryx provides MCP server support, allowing AI coding agents to browse components, generate themes, and fetch docs directly from the command line.
Astryx is open source under a permissive license (MIT or similar, check repo). The project is available at astryx.atmeta.com. You can start by running the CLI after installing the package:
npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcpThese commands are inferred from the site description; exact syntax may vary.
Who It's For
Developers building React applications who need a battle-tested design system with AI-agent integration for rapid prototyping and production use.
📖 Read the full source: HN AI Agents
👀 See Also
Lovelace: Project Management for Claude Code That Lives in Your Repo
A desktop app where tickets, docs, and session records are Markdown files inside your repo. The app renders a kanban board from the files, and Claude works the same files through 8 MCP tools. Free, no account needed.

Two Free Claude Code Skills: Tutorial Generator and Prompt Fixer
Two new free Claude Code skills: create-tutorial generates code reading tutorials from your actual project files, and prompter rewrites typo-filled prompts into actionable instructions. Both are MIT licensed and install via GitHub.

DESIGN.md: A format spec for describing visual identity to coding agents
DESIGN.md combines YAML design tokens with markdown prose to give AI coding agents a persistent, structured understanding of a design system. Includes a linter and diff tool.

Benchmark: MLX vs Ollama Running Qwen3-Coder-Next 8-Bit on M5 Max MacBook Pro
A benchmark comparing MLX and Ollama backends running Qwen3-Coder-Next 8-bit quantization on an M5 Max MacBook Pro with 128GB RAM shows MLX achieving approximately 72 tokens per second, roughly double Ollama's throughput across various coding tasks.