# Common Use Cases for Astryx: Building Internal Tools at Scale

> Discover common use cases for Astryx, a design system for building scalable internal tools with a shared UI language and rapid component reuse. Deploy framework-agnostic.

- Repository: [Meta/astryx](https://github.com/facebook/astryx)
- Tags: tutorial
- Published: 2026-08-03

---

**Astryx is a full-stack design system purpose-built for creating internal tools and products with a shared UI language, rapid component reuse, and framework-agnostic deployment.**

Developed by Facebook (Meta), Astryx addresses the fragmentation problem that plagues internal tool development. Instead of reinventing common UI patterns for every new admin panel or dashboard, teams can leverage a **150+ component library** with built-in accessibility, theming, and CLI-powered workflows. This article explores where Astryx delivers maximum value based on its actual implementation in the `facebook/astryx` repository.

## Shared UI Foundation for Internal Products

The core mission of Astryx, as stated in the [Overview section of [`README.md`](https://github.com/facebook/astryx/blob/main/README.md)](https://github.com/facebook/astryx/blob/main/README.md#overview), is to **solve shared problems once**. Internal tool teams at scale repeatedly rebuild the same elements: data tables, form wizards, navigation shells, and settings panels.

Astryx collapses this redundancy into a single, versioned dependency. The architecture separates concerns across scoped packages:

- **`@astryxdesign/core`** – Typed React components in `packages/core/src/components/`
- **`@astryxdesign/cli`** – Developer tooling for scaffolding and customization
- **`@astryxdesign/theme-*`** – CSS custom property bundles for brand theming

This package structure lets product teams import only what they need while maintaining upgrade paths.

## Rapid Interface Composition with 150+ Components

The component catalog in [`@astryxdesign/core`](https://github.com/facebook/astryx/tree/main/packages/core) covers the full internal-tool vocabulary: `Button`, `Card`, `DataTable`, `Form`, `Input`, `Select`, `Modal`, `Tabs`, and specialized data visualization wrappers.

Each component ships with:

- Full TypeScript definitions
- ARIA-compliant accessibility attributes
- Theme-aware styling via CSS custom properties
- Composable subcomponents (e.g., `DataTable.Header`, `DataTable.Row`)

```tsx
import {Button, Card} from '@astryxdesign/core';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function AdminPanel() {
  return (
    <Theme theme={neutralTheme}>
      <Card>
        <Button label="Deploy" variant="primary" />
      </Card>
    </Theme>
  );
}

```

The [Quick Start example in [`packages/core/README.md`](https://github.com/facebook/astryx/blob/main/packages/core/README.md)](https://github.com/facebook/astryx/blob/main/packages/core/README.md#quick-start) demonstrates this pattern: wrap your application in a `Theme` provider, then compose components declaratively.

## Theme-First Brand Customization Without Lock-In

Astryx treats theming as **CSS custom property overrides** rather than runtime JavaScript objects or CSS-in-JS solutions. This architectural decision eliminates build-tool dependencies and enables zero-JS theming.

Themes live in standalone packages like [`@astryxdesign/theme-neutral`](https://github.com/facebook/astryx/tree/main/packages/themes/neutral). A theme file is simply a CSS bundle that redefines design tokens:

```css
:root {
  --astryx-color-primary: #0066ff;
  --astryx-spacing-md: 1rem;
  --astryx-radius-button: 4px;
}

```

Teams can publish internal theme packages that layer on top of core, or override tokens at the application level without swizzling component source code.

## CLI-Driven Development Workflows

The [`@astryxdesign/cli`](https://github.com/facebook/astryx/tree/main/packages/cli) package transforms Astryx from a component library into a **generative development environment**. Per the CLI documentation in [`packages/cli/README.md`](https://github.com/facebook/astryx/blob/main/packages/cli/README.md), it exposes four critical commands:

| Command | Purpose |
|---------|---------|
| `astryx template` | Emit ready-made page templates (dashboard, settings, detail views) |
| `astryx swizzle` | Eject component source for deep customization |
| `astryx docs` | Generate component indexes for AI agent discovery |
| `astryx codemod` | Run automated migrations across breaking changes |

**Template generation** accelerates page construction:

```bash

# List available templates

npx @astryxdesign/cli template --list

# Scaffold a full dashboard

npx @astryxdesign/cli template dashboard > src/pages/dashboard.tsx

```

Templates compose common layout slots—navigation rail, content area, action bar—that teams wrap with app-specific chrome.

**Swizzling** enables escape hatches when component defaults don't suffice:

```bash

# Eject Button source into your project

npx @astryxdesign/cli swizzle Button

```

After swizzling, the generated [`Button.tsx`](https://github.com/facebook/astryx/blob/main/Button.tsx) becomes editable source in your repository while preserving the ability to diff against upstream updates.

## Zero-Build Integration for Prototyping

Astryx ships pre-built artifacts that require **no transpilation, bundler configuration, or PostCSS pipeline**. This enables deployment scenarios that traditional design systems cannot support.

The ["No build step (CDN)" example](https://github.com/facebook/astryx/blob/main/packages/core/README.md) in [`packages/core/README.md`](https://github.com/facebook/astryx/blob/main/packages/core/README.md) demonstrates:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css">
<script src="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.umd.js"></script>
<script>
  const {Button, Card} = window.Astryx;
  const e = React.createElement;
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    e(Card, null, 
      e(Button, {variant: 'primary'}, 'Hello from CDN')
    )
  );
</script>

```

Use cases for CDN deployment include:
- Rapid prototyping without `npm install`
- Documentation examples that must run in isolation
- Legacy applications where build-tool upgrades are prohibited
- AI-generated code sandboxes where dependency resolution is constrained

## AI-Assisted Development via Structured Discovery

Astryx explicitly supports **large language model workflows**. The CLI writes component indexes into [`AGENTS.md`](https://github.com/facebook/astryx/blob/main/AGENTS.md) and [`CLAUDE.md`](https://github.com/facebook/astryx/blob/main/CLAUDE.md) files at the repository root, creating a machine-readable reference surface.

Per the architecture described in [[`apps/docsite/src/content/blog/posts/how-astryx-works.md`](https://github.com/facebook/astryx/blob/main/apps/docsite/src/content/blog/posts/how-astryx-works.md)](https://github.com/facebook/astryx/blob/main/apps/docsite/src/content/blog/posts/how-astryx-works.md), these files contain:

- Component prop signatures and type definitions
- Design token values and variable names
- Template slot specifications and composition patterns

This enables LLM agents to discover Astryx capabilities without hallucination, generating code that imports real packages and uses verified APIs.

## Where Astryx Delivers Maximum Value

| Scenario | Astryx Advantage |
|----------|----------------|
| **Internal admin panels** | Unified component language across dozens of microservices |
| **Multi-step forms & wizards** | Pre-built `Form` primitives with validation integration |
| **Data-dense dashboards** | Chart wrappers (`@astryxdesign/charts`, `@astryxdesign/vega`) with consistent theming |
| **Cross-team UI libraries** | Swizzle capability enables extension without forking |
| **Rapid prototyping** | CDN deployment in two lines of HTML |
| **AI-generated interfaces** | Structured component indexes in [`AGENTS.md`](https://github.com/facebook/astryx/blob/main/AGENTS.md)/[`CLAUDE.md`](https://github.com/facebook/astryx/blob/main/CLAUDE.md) |

## Summary

- **Astryx targets internal tools** with a component-count and API surface optimized for admin panels, dashboards, and operational software—not consumer marketing sites.
- **150+ accessible React components** in `@astryxdesign/core` cover the full internal-tool vocabulary with TypeScript definitions and ARIA compliance.
- **CSS custom property theming** enables brand customization without JavaScript runtime overhead or build-tool lock-in.
- **CLI workflows** (template, swizzle, codemod) bridge design systems and generative development, supporting both human developers and AI agents.
- **Zero-build CDN deployment** removes infrastructure barriers for prototyping and legacy integration.
- **Open internals** via swizzling let teams customize deeply while maintaining upstream compatibility.

## Frequently Asked Questions

### What types of projects is Astryx best suited for?

Astryx excels at **internal-facing applications**: admin panels, operational dashboards, configuration tools, and data management interfaces. The component library prioritizes density, consistency, and accessibility over visual flourish. Per the [project overview in [`README.md`](https://github.com/facebook/astryx/blob/main/README.md)](https://github.com/facebook/astryx/blob/main/README.md#overview), it was built to solve "shared problems once" across Meta's internal tool ecosystem.

### Can Astryx be used without a build step?

Yes. Astryx publishes pre-built CSS and UMD bundles to npm's CDN. Include two tags in your HTML and access components via `window.Astryx`. This "No build step" path is documented in [[`packages/core/README.md`](https://github.com/facebook/astryx/blob/main/packages/core/README.md)](https://github.com/facebook/astryx/blob/main/packages/core/README.md) with a complete working example.

### How does Astryx support AI-assisted coding?

The CLI generates [`AGENTS.md`](https://github.com/facebook/astryx/blob/main/AGENTS.md) and [`CLAUDE.md`](https://github.com/facebook/astryx/blob/main/CLAUDE.md) files that catalog components, tokens, and templates in a structured format. LLM agents read these files to discover available imports, prop types, and composition patterns without training on the full codebase. This makes Astryx particularly effective for AI-generated UI implementations.

### What is "swizzling" in Astryx?

Swizzling is the CLI command `astryx swizzle <Component>` that **ejects component source code** into your project. Unlike forking the entire repository, swizzling copies just the specific component—preserving your ability to customize implementation details while still receiving updates to non-swizzled components. The ejected source becomes yours to modify, with no coupling to the original package's release cycle.