Where to Find Astryx Documentation: 6 Sources Explained

Astryx documentation is available at astryx.atmeta.com, bundled in repository README files, and accessible through the CLI, Storybook, Sandbox, and GitHub Wiki.

Searching for where to find Astryx documentation? Meta's open-source design system distributes its knowledge base across multiple curated channels. Whether you prefer browsing a polished website, reading source files directly, or generating docs on demand, Astryx provides purpose-built resources for every workflow.

Official Documentation Website

The primary Astryx documentation lives at astryx.atmeta.com. This searchable site contains:

• Complete design system reference
• Token tables for colors, typography, spacing, and elevation
• Component APIs with prop definitions and type signatures
• Theming guides for customization
• Usage patterns and best practices

This is the fastest entry point for designers and developers who need authoritative, up-to-date guidance without cloning the repository.

In-Repository Documentation

Every published package in facebook/astryx ships with dedicated documentation. These files render on GitHub and install alongside your dependencies.

File Path	Contents
[packages/core/README.md](https://github.com/facebook/astryx/blob/main/packages/core/README.md)	Core component library quick-start and API reference
[packages/cli/README.md](https://github.com/facebook/astryx/blob/main/packages/cli/README.md)	CLI installation and command reference
packages/themes/neutral/README.md	Theme definition examples and CSS import instructions
apps/storybook/README.md	Visual testing environment setup
apps/sandbox/README.md	Rapid prototyping playground instructions

Access these directly in your node_modules/@astryxdesign/*/README.md after installation, or browse them on GitHub before deciding to adopt.

CLI-Generated Documentation

The Astryx CLI generates targeted documentation on demand. Install it as a dev dependency, then query specific topics:

# Install the CLI

npm install -D @astryxdesign/cli

# Full documentation index

npx astryx docs

# Theming-specific guide

npx astryx docs theme

# Design token reference

npx astryx docs tokens

# Component-specific API (example: Button)

npx astryx component Button

# List all available components

npx astryx component --list

This approach suits developers who prefer terminal-driven workflows or need offline-accessible documentation.

Interactive Storybook

Visual learners and UI engineers should bookmark facebook.github.io/astryx/storybook/. This Storybook deployment provides:

• Interactive component rendering
• Live prop editing with immediate feedback
• Visual regression testing baseline
• Component state coverage (default, hover, disabled, loading)

Use Storybook when evaluating component behavior before implementation or when demonstrating Astryx capabilities to stakeholders.

Sandbox Playground

For rapid experimentation without local setup, the Sandbox offers a browser-based environment. Test component combinations, theme overrides, and prop configurations without configuring a build pipeline.

Contributing Wiki

The GitHub Wiki hosts deeper architectural knowledge for contributors and advanced users:

• API Conventions — Naming patterns, prop interfaces, and backward compatibility rules
• Design Conventions — Design system philosophy and token taxonomy

These resources explain why Astryx is structured the way it is, not just how to use it.

Quick Start Example

Here's how to access documentation while setting up your first Astryx project:

# Install core library and neutral theme

npm install @astryxdesign/core @astryxdesign/theme-neutral

# Install CLI for documentation access

npm install -D @astryxdesign/cli

# Open documentation in browser

open https://astryx.atmeta.com

# Query Button component API in terminal

npx astryx component Button

// Render a themed Button component
import {Button} from '@astryxdesign/core/Button';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export default function Example() {
  return (
    <Theme theme={neutralTheme}>
      <Button label="Hello Astryx" variant="primary" />
    </Theme>
  );
}

Summary

• astryx.atmeta.com — Primary searchable documentation site
• Repository READMEs — Package-specific guides at packages/*/README.md
• Astryx CLI — Terminal-based doc generation with astryx docs and astryx component
• Storybook — Interactive component inspection at facebook.github.io/astryx/storybook/
• Sandbox — Browser playground for rapid prototyping
• GitHub Wiki — Contributor conventions and design system architecture

Frequently Asked Questions

Where is the official Astryx documentation website?

The official Astryx documentation is hosted at astryx.atmeta.com. This site provides the complete design system reference, including token tables, component APIs, theming guides, and usage patterns. It is maintained by Meta and updates automatically with each release.

Can I access Astryx documentation without an internet connection?

Yes. After installing any @astryxdesign/* package, the corresponding README.md files reside in your node_modules directory. The CLI also works offline once installed: run npx astryx docs or npx astryx component <Name> to generate documentation locally without browser access.

How do I find documentation for a specific Astryx component?

Use the CLI command npx astryx component <ComponentName> — for example, npx astryx component Button. Alternatively, browse the interactive Storybook at facebook.github.io/astryx/storybook/ to inspect props visually, or search the component name on astryx.atmeta.com for the authoritative API reference.

What is the difference between Storybook and the Sandbox?

Storybook isolates individual components for prop inspection and visual regression testing. It shows every state a component supports. The Sandbox provides a free-form playground where you compose multiple components together, test theme overrides, and prototype layouts without predefined scenarios. Use Storybook for evaluation; use Sandbox for experimentation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}