OSS探訪ページ内ナビ
概要
React Spectrum repositoryは、Adobe SpectrumのReact component、unstyledなReact Aria、state logicを提供するReact Stately、国際化libraryをまとめたmonorepoです。完成済みdesign systemを使う場合と、独自UIへaccessibility behaviorだけ組み込む場合の両方を支援します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
React SpectrumでAdobeのdesign systemをそのまま利用する
React SpectrumはAdobe SpectrumをReactで実装し、統一されたvisual designとinteractionをcomponentとして提供します。
出典：[1]
React Ariaで見た目を固定せずaccessibility behaviorを組み込む
React Ariaはunstyled componentsとhooksを提供し、自社design systemのDOMやstylingを保ちながらkeyboard、focus、interaction、ARIA behaviorを実装できます。
出典：[1]
keyboard・touch・screen readerと国際化を標準で考慮する
WAI-ARIA Authoring Practicesに沿ったaccessibility、keyboard navigation、mouse/touch interaction、30以上の言語、RTL、日付・数値formatなどをlibrary群で提供します。
出典：[1]
向いている用途
accessibilityを後付けせずdesign systemの基盤へ組み込みたいteamに向く
社内component library、SaaS UI、複雑なformやcollection componentで、keyboardやscreen reader対応を低levelから毎回作り直したくない場合に適しています。
出典：[1]
導入前の確認
repository全体ではなくpackage単位でversionを管理する
このmonorepoは多数のnpm packageを独立versionで公開します。2026-09-04のreleaseではReact Aria Components 1.21.0とReact Spectrum S2 1.7.0が公開されており、main branchのversionが先行する場合もあります。
Spectrum S2とReact AriaではReactのsupport rangeが異なる
current package metadataではReact Aria ComponentsがReact 16.8〜19系列をpeerとして許容する一方、Spectrum S2はReact 19系列を前提にしています。既存applicationのReact versionに合わせてlibrary familyを選びます。
accessible componentでもapplication側のlabel・content設計は必要
libraryがkeyboardやARIA behaviorを提供しても、適切なlabel、validation message、semantic contentなどapplication固有のaccessibility要件は実装側で確認します。
出典：[1]
参考にした公式資料
- [1]React Spectrum README(2026-10-03)
- [2]React Aria Components 1.21.0 release(2026-10-03)
- [3]React Spectrum S2 1.7.0 release(2026-10-03)
- [4]React Aria Components package(2026-10-03)
- [5]React Spectrum S2 package(2026-10-03)
- [6]React Spectrum Apache-2.0 license(2026-10-03)
編集部からの補足
完成したAdobe Spectrum UIを使うならReact Spectrum、独自design systemを作るならReact Ariaを起点に分けて選べる点が強みです。monorepo内のpackageは独立versionなのでrepository全体を一つのversionとして扱わず、採用packageごとにreleaseを固定してください。
3ステップで試す
- 1
既存React projectへReact Aria Componentsを追加
独自stylingを使う最小構成として、2026-09-04公開のReact Aria Componentsを追加します。
npm install react-aria-components@1.21.0 - 2
accessible componentを配置
component内で <Button>Save</Button> を配置し、既存のCSSやdesign tokenで見た目を定義します。
import {Button} from 'react-aria-components'; - 3
keyboard操作を確認
Tabでfocusでき、Enter/Spaceで操作できることを確認します。完成済みAdobe stylingが必要ならReact Spectrum/S2を別途評価します。
npm run dev
成長
成長の推移 · 直近30日
15,911 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 56
- Open PR
- 94
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- react
- accessibility
- design-systems
- react-components
- wai-aria
- ui-components
- Stars
- 15,911
- Forks
- 1,590
- Watchers
- 77
- Open Issues
- 509
- Contributors
- 410
- 所有者種別
- Organization
- 主要言語
- TypeScript
- ライセンス
- Apache-2.0
- リポジトリ最終更新
- 2026/10/03
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- React Select28,027 Stars
共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語
検索・複数選択・非同期候補まで扱えるReact向けSelect UIを組み立てる
TypeScript - shadcn/ui125,056 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
コンポーネントのソースをプロジェクトへ取り込み、自分のUIライブラリとして育てる
TypeScript - Zustand58,784 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
Reactの状態をproviderなしのhook storeで管理し、selectorで必要な部分だけ購読する
TypeScript - vanilla-extract10,435 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
TypeScriptで型安全なstyleを記述し、build時に静的CSSへ変換する
TypeScript - Blade652 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
React WebとReact Nativeでtheme・design token・accessible UI componentを共通化する
TypeScript - React Native126,786 Stars
共通タグ 3件 · 共通カテゴリ 2件
React componentをnative UIへ描画するmobile framework。0.87.1とframework-first導線を整理
C++
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。