OSS探訪
GitHubで見るプロジェクトサイト

Chakra UI — アクセシブルなReactコンポーネントとテーマを共通のデザインシステムで使う

OSS規模スコア 307.3OSS健全度 96更新ペース 35 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
40,661
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/15

概要

Chakra UIは、アクセシビリティを考慮したReactコンポーネント、デザイントークン、テーマ機能をまとめたUIシステムです。標準部品をそのまま使うだけでなく、Ark UI由来のheadless primitiveを基に構成を拡張できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

アクセシブルなReact部品を共通APIで使う

ButtonなどのUI部品をWAI-ARIAを意識した実装で利用し、画面ごとの基礎コンポーネントを共通化できます。

出典：[2][3]

token・recipe・themeでデザインを統一する

デザイントークン、semantic token、recipe、dark modeなどを使い、プロダクト全体の見た目を同じsystemから管理できます。

出典：[3][4]

SaaSや業務Webアプリのデザインシステム基盤に

フォーム、ナビゲーション、ダイアログなどを共通部品化し、アクセシビリティとテーマ運用を同じ基盤で管理したいReact開発に向きます。

出典：[2]

v2以前の例とv3のProvider構成を混在させない

現行v3ではChakraProviderへdefaultSystem等のsystemを渡す構成です。過去版のセットアップ記事をそのまま適用せず、利用中のメジャー版に対応するdocsを確認してください。

出典：[3][4]

参考にした公式資料

  1. [1]chakra-ui/chakra-ui repository(2026-09-21)
  2. [2]Chakra UI README(2026-09-21)
  3. [3]@chakra-ui/react README(2026-09-21)
  4. [4]Chakra UI documentation(2026-09-21)
  5. [5]@chakra-ui/react package(2026-09-21)
  6. [6]Chakra UI MIT license(2026-09-21)
編集部からの補足

Chakra UIは完成済みコンポーネントだけでなく、Ark UIを基盤にしたcomposableなUIとデザイントークンを提供します。現在の`@chakra-ui/react`は3.37.0で、React/React DOM 18以上と`@emotion/react`をpeer dependencyとしています。v2以前とはセットアップ方法が異なるため、現行docsを基準にしてください。

3ステップで試す

  1. 1

    Chakra UIを追加

    現行v3のREADMEに従って本体とpeer dependencyを追加します。

    npm i @chakra-ui/react @emotion/react
  2. 2

    ChakraProviderを設定

    アプリのルートでdefaultSystemをProviderへ渡し、Chakra UIのsystemを有効にします。

    <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
  3. 3

    最初のコンポーネントを表示

    Button等を読み込み、テーマとアクセシビリティを含む基本コンポーネントの表示を確認します。

    <Button>I just consumed some Chakra!</Button>
公式READMEで確認

成長

成長の推移 · 直近30日

40,661 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
35
Open PR
12

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • chakra-ui
  • react
  • uikit
  • react-components
  • accessible
  • a11y
  • wai-aria
  • reactjs
  • dark-mode
  • ui-components
  • ui-library
  • ark-ui
Stars
40,661
Forks
3,646
Watchers
203
Open Issues
2
Contributors
413
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/15
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。