Astryx: Facebook's Open-Source Design System Built for Humans and AI Agents

Why Astryx Matters Right Now

The way we build user interfaces is changing. AI coding agents like Cursor, Copilot, and Claude are writing more frontend code than ever — but most design systems were built for humans only. Documentation assumes a person reading it. APIs assume a developer clicking through Storybook. The result? AI agents struggle with inconsistent naming, undocumented patterns, and styling systems that fight automation.

Astryx is different. Born inside Meta over eight years and powering over 13,000 apps, it was designed from day one so that people and AI assistants build the same way, from the same reference. Every convention is documented, every component follows the same prop and naming rules, and every CLI command is accessible to both humans and agents.

Today it hit GitHub Trending with 708 stars in a single day — and it's easy to see why.

What You Get Out of the Box

Astryx ships as a cohesive system, not a bag of parts:

• 150+ Accessible Components — Buttons, modals, data tables, form wizards, navigation patterns. All fully typed with TypeScript and tested for accessibility.
• 7 Ready-Made Themes — Neutral, Butter, Chocolate, Matcha, Stone, Gothic, and Y2K. Each is a set of CSS custom property overrides, so customizing is as simple as changing values.
• Dark Mode — Built-in, not bolted on. Every theme supports light and dark variants out of the box.
• CLI Tooling — Component docs, templates, scaffolding, theme generation, and codemods. One command to explore the entire system.
• Ready-to-Ship Templates — Table pages, detail page layouts, form wizards, and common workflows. Start from a template, not a blank canvas.

Four Design Decisions That Set Astryx Apart

1. Open Internals, Not Closed APIs

Most design systems expose a polished top-level API and hide their internals. Astryx does the opposite: the building blocks it uses internally are exported directly. When you need to go deeper, the swizzle command ejects a component's full source into your project so you can own it completely.

# Eject a component to customize at any level
npm run astryx -- component swizzle Button

This means you're never stuck waiting for the library to add a feature. You take what you need and make it yours.

2. No Styling Lock-In

Astryx authors its styles with StyleX, but that's invisible to consumers. You override components with className using Tailwind, CSS Modules, or plain CSS — whatever your project already uses.

// Override Astryx components with your existing styling
import { Button } from '@astryxdesign/core';

function MyApp() {
  return (
    <Button className="bg-blue-500 hover:bg-blue-700 text-white rounded-lg">
      Click Me
    </Button>
  );
}

No build plugin. No PostCSS config. No Babel setup. Just import CSS and use typed React components.

3. Customize Without Wrapping

A theme in Astryx is a set of CSS custom property overrides. A designer can make it unmistakably theirs without forking or wrapping any component source:

/* my-theme.css — override any design token */
:root {
  --astryx-color-primary: #8b5cf6;
  --astryx-color-surface: #1e1b4b;
  --astryx-radius-md: 8px;
  --astryx-font-family-base: 'Inter', sans-serif;
}

Import your CSS after the theme CSS, and every component updates. No wrapper components, no prop drilling, no context providers for styling.

4. Built for People and Agents

This is the headline feature, and it's not a gimmick. The API, documentation, and CLI were designed together so that an AI assistant and a human developer build the same way:

• Strong, documented conventions — Every component follows the same naming, prop, and composition rules. Once you learn a few, the rest are predictable — for people and AI alike.
• CLI as the universal interface — npm run astryx -- component --list gives both a developer and an agent the same structured view of available components.
• Guidance over enforcement — Components give you capability rather than guardrails that fight you. Design opinions live in docs and examples.

# Both you and your AI agent use the same CLI
npm run astryx -- component docs Button
npm run astryx -- template list
npm run astryx -- theme create my-brand

Getting Started in Under 2 Minutes

# Install core + a theme
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

# That's it. No build config needed.

// Import and use
import '@astryxdesign/theme-neutral/css';
import { Button, Card, Stack } from '@astryxdesign/core';

function Dashboard() {
  return (
    <Stack gap="md">
      <Card padding="lg">
        <h2>Welcome back</h2>
        <p>Your dashboard is ready.</p>
        <Button variant="primary">Get Started</Button>
      </Card>
    </Stack>
  );
}

Astryx works with Next.js, Vite, Remix, and even CDN-only setups. The core README has full integration guides for each.

Real-World Example: Building an Admin Dashboard

Let's say you're building an admin panel. With Astryx, you can scaffold a full page layout in minutes:

# Scaffold a table page template
npm run astryx -- template generate table-page

This gives you a complete page with data table, filters, pagination, and responsive layout — all using Astryx components and your chosen theme. From there:

• Swap the theme CSS to match your brand in one file
• Add custom columns using standard React patterns
• Override specific component styles with your Tailwind classes
• Let your AI coding agent extend the page using the same CLI and docs

The key insight: both you and your AI agent work from the same tooling and the same documentation. There's no separate "AI mode" — the system is simply well-documented and consistent enough that agents can navigate it as naturally as a senior developer.

Key Benefits

• Battle-tested at scale — Powers 13,000+ apps inside Meta, not a weekend project
• Zero lock-in — Works with any CSS approach: Tailwind, CSS Modules, plain CSS
• Agent-ready — First major design system built with AI coding agents as first-class users
• MIT licensed — Use it anywhere, modify anything, no restrictions
• 150+ typed components — Full TypeScript support with consistent prop patterns
• 7 themes included — From minimal Neutral to bold Y2K, all fully customizable
• CLI-first DX — Scaffold, explore, document, and customize from the terminal
• No build plugins — Import CSS, use components. That's the whole setup.

Package Overview

Package	What It Does
@astryxdesign/core	Components, theme system, and utilities
@astryxdesign/cli	CLI: docs, templates, scaffolding, themes, codemods
@astryxdesign/build	Build plugins for StyleX source builds
@astryxdesign/theme-*	Seven ready-made, customizable themes

Frequently Asked Questions

Is Astryx production-ready?

Astryx is currently in Beta, but it has been powering over 13,000 apps inside Meta for years. The components are battle-tested; the open-source packaging is newer. For production use, pin your version and watch the changelog.

Does Astryx work with Next.js?

Yes. Astryx supports Next.js, Vite, Remix, and CDN-only setups. The core README includes specific integration guides for each framework. No special build plugin or PostCSS configuration is required.

Can I use Tailwind CSS with Astryx?

Absolutely. Astryx authors its internal styles with StyleX, but consumers override components using className with any CSS approach — Tailwind, CSS Modules, styled-components, or plain CSS. There is zero styling lock-in.

How is Astryx different from Material UI or Chakra UI?

Three key differences: (1) Astryx was designed with AI coding agents as first-class users, not an afterthought; (2) it has zero styling lock-in — no styling library adoption required; (3) it's been tested at Meta's scale across 13,000+ apps. It also ships with a CLI for scaffolding, codemods, and template generation.

What does "agent-ready" actually mean?

It means the API conventions, documentation, and CLI are designed together so that an AI coding assistant can navigate Astryx as effectively as a human developer. Every component follows consistent naming and prop patterns, every CLI command produces structured output, and the docs serve as a single reference for both. There is no separate "AI mode" — the system is simply well-documented and predictable enough for agents to use naturally.

Is Astryx free to use?

Yes, Astryx is released under the MIT license. You can use it in personal projects, commercial products, and internal tools without any restrictions. You can also fork, modify, and redistribute it freely.

How do I customize Astryx to match my brand?

Themes in Astryx are sets of CSS custom property overrides. Create a CSS file with your brand values (colors, spacing, typography, radius), import it after the theme CSS, and every component updates automatically. No forking, no wrapper components, no prop drilling required.