facebook/astryx

これは何？

主な機能

• 01TypeScriptを全面的にサポートした、150以上のアクセシブルなReactコンポーネント。
• 02CSSカスタムプロパティでカスタマイズできる、すぐに使える7種類のテーマ。
• 03ダークモードとブランド単位のテーマ設定。
• 04Tailwind、CSS modules、通常のCSSを使い、classNameでコンポーネントを上書き可能。
• 05swizzleコマンドでコンポーネントのソースをプロジェクトに取り込める。
• 06コンポーネントのドキュメント、テンプレート、スキャフォールディング、codemods用のCLI。

ユースケース

• 一貫性とアクセシビリティを備えたコンポーネントライブラリが必要なReactアプリケーションの構築。
• コンポーネントをフォークせずにテーマ変数をカスタマイズして、ブランドに合わせたプロダクトUIを作成。
• AIコーディングアシスタントに、インターフェース構築に使えるドキュメント付きのコンポーネントAPIを提供。

クイックスタート

1. 1

   npmでcore、テーマ、StyleX、CLIをインストールします

   npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli
2. 2

   CSSのインポートとテーマプロバイダーの設定については、coreパッケージのクイックスタートに従ってください

3. 3

   コントリビューター向け: Corepackを有効にして、リポジトリ内で依存関係をインストールしてください

   corepack enable pnpm install

使う前に知っておきたいこと

• !現在ベータ版のため、APIが変更される可能性があります。
• !公開パッケージの@astryxdesign/vegaと@astryxdesign/chartsは、現時点では@canaryリリースのみで、安定版はありません。
• !React 19以降が必要です。

トピック

よくある質問

astryx とは？

React 19とStyleXを基盤とした、150以上のアクセシブルなコンポーネント、テーマ、CLIを備えるオープンソースのReactデザインシステム。 AstryxはMeta社内で生まれ、現在は外部向けに公開されているオープンソースのデザインシステムです。型定義付きのReactコンポーネント、ブランド単位のテーマ設定、ダークモード、すぐに使えるテンプレートを、ひとつのシステムとして提供します。

astryx は無料で使えますか？ライセンスは？

astryx は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

astryx は今もメンテナンスされていますか？

活発にメンテナンス中。astryx の最終コミットは 2026年10月19日 です。

astryx は何に使えますか？

一貫性とアクセシビリティを備えたコンポーネントライブラリが必要なReactアプリケーションの構築。 コンポーネントをフォークせずにテーマ変数をカスタマイズして、ブランドに合わせたプロダクトUIを作成。 AIコーディングアシスタントに、インターフェース構築に使えるドキュメント付きのコンポーネントAPIを提供。

astryx のインストール方法は？

npmでcore、テーマ、StyleX、CLIをインストールします: npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex && npm install -D @astryxdesign/cli CSSのインポートとテーマプロバイダーの設定については、coreパッケージのクイックスタートに従ってください コントリビューター向け: Corepackを有効にして、リポジトリ内で依存関係をインストールしてください: corepack enable pnpm install

astryx はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/facebook/astryx