Chakra UI は、最新の Web アプリケーションと Web サイトの開発を合理化する、アクセス可能、再利用可能、および構成可能な React コンポーネントの包括的なライブラリです。このライブラリは、アクセシビリティのベスト プラクティスを遵守しながら、複雑なユーザー インターフェイスを構築するために簡単に組み合わせることができる多様なコンポーネントを提供します。
create-react-app
テンプレートこれは、Chakra UI の最新バージョンの Web サイト https://chakra-ui.com です。古いバージョンについてはここにアクセスしてください
Box
やStack
などのレイアウト コンポーネントのセットが含まれています。もっと詳しく知るaria-*
属性を持っています。Chakra UI コンポーネントを使用するには、 @chakra-ui/react
パッケージとそのピアの依存関係をインストールするだけです。
# with Yarn
$ yarn add @chakra-ui/react @emotion/react
# with npm
$ npm i @chakra-ui/react @emotion/react
# with pnpm
$ pnpm add @chakra-ui/react @emotion/react
# with Bun
$ bun add @chakra-ui/react @emotion/react
コンポーネントの使用を開始するには、次の手順に従ってください。
ChakraProvider
でアプリケーションをラップします。 import { ChakraProvider , defaultSystem } from "@chakra-ui/react"
// Do this at the root of your application
function App ( { children } ) {
return < ChakraProvider value = { defaultSystem } > { children } < / ChakraProvider >
}
オプションで、アプリケーションをColorModeProvider
でラップして、アプリケーション内でライト モードとダーク モードを切り替えることができます。
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
開始方法に関するその他のガイドはここから入手できます
create-react-app
テンプレート公式のcreate-react-app
テンプレートの使用方法については、ガイドをご覧ください。
貢献したいと思いませんか?すごいですね!私たちはあなたを導くのに役立つ貢献ガイドを用意しています。
私たちのドキュメントサイトは別のリポジトリにあります。ドキュメントへの貢献に興味がある場合は、ドキュメントサイトの貢献ガイドを確認してください。
あなたの組織でこのプロジェクトをサポートしてください。あなたのロゴがあなたの Web サイトへのリンクとともにここに表示されます。 [貢献する]
5 ドル以上を寄付することで、このプロジェクトの進行中の開発をサポートできます。ご支援をよろしくお願いいたします。サポーターの皆様、ありがとうございました! [貢献する]
人々は定期的に React コンポーネント ライブラリや設計システムを私に投げかけます。これは私が見た中で最高のものかもしれません。 API はシンプルですが構成可能で、私が調べたいくつかのコンポーネントへのアクセシビリティは完全です。
素晴らしい仕事です @thesegunadebayo、本当に感動的な仕事です。 – ライアン・フローレンス
@thesegunadebayo による素晴らしい新しいオープンソース コンポーネント ライブラリ。本当に印象的なものです! – コルム・テュイト
これは信じられないほどの仕事だ。素晴らしい仕事だ、セグン! – リー・ロビンソン
Chakra UIは素晴らしいです!一貫したフォーカス スタイルの使用と微妙なアニメーションが大好きです – Guillermo ▲
Chakra UI が JavaScript エコシステムにもたらしたすべてのイノベーションと到達点に対して、コミュニティから賞や言及をいただき、大変恐縮しております。
追求する価値のある解決策テクノロジーレーダー (2020–2021) | |
コミュニティへの最も影響力のある貢献オープンソース賞 (2020) |
これらの素晴らしい人々に感謝します
セグン・アデバヨ ? ? | ティオルワニ・コラウォル ? | デヴァンシュ・ジェスマラニ | エイドリアン・アレイサンドル | リー | クリストフ・ポドゥスロー ? ? | ジャスティン・ホール |
マーク・チャンドラー | フォラサード・アグバジェ ? | クリスチャン・ヌワンバ | ジョナサン・バケブワ ? | アレックス・ルオン ? | ジェスコ・ヴスター | ダスティ・ドリス |
アレックス・ロベラ | トンマーソ・デ・ロッシ | オーディ | ヘンドリック・ニーマン | マット・ローゼンバーグ | ルイス・フェリペ・ザギーニ | ジャン |
テミトーペ・アジボエ | ジョナサン・キム | クリス・トンプソン | ウォルター・キマロ | ジャック・レスリー | ケンローレン・ダガニオ | ラモン |
ジェス ? | アイエレガン・カヨデ・マイケル | タル・ウィリアムズ | トレバー・ブレイズ ? | ゴード・リー | アゲロス・アルヴァニタキス | ダグラス・ガブリエル |
マーティン・ノードストローム | ダニー・テイトム | サイモン・コリンズ | サンティ・アルボ | ピロ7980 | 石本浩二 | ジェフ・ウェン |
パブロ・サエス | ネイク・ラヴニク | ジュリアン・ヴィアラ | セバスチャン・トレブナク | アダム・プランテ | ルシオ・ルーベンス | ジェイソン・ミアズガ |
ゴンサロ・ポッツォ | キリスト教徒 ? | クリスチャン・ハーゲンドルン | アンドレイ・クラスノフ | ドニー・スカルディ | 孟 | ガブリエレ・ベルアルド |
フランソワ・ベスト | ヘ・ティエンシー | スティーブン | バティスト・エイドリアン | ロブ・ビーヴァン | トマシュ | 徐愷 |
デビッド・ウィッペル | ナヴィーン | ヴィンセント | オサマ・アルドアイス | フレッド・K・ショット | ジャレッド・パーマー | オースティン・ワレラ |
トニー・ナーロック | トーマス・マキシミニ | デビッド・ボームゴールド | ラフィリウス | ラーフル・ラングネカール | ピエール・ネル | ピエール・グリモー |
ウィスプの研究開発 | マケンナ・スマッツ ? | ネルソン・ライツ | モハメド・ナイナール | ムスタファ・トゥルハン | キム・ロン | ジャスティン・マック |
ジェレミー・デイビス | ジェレミー・ルー | イワン・ダルメット ? | ディロン・カリー | 識別子 | デンキ街 | アーロン・アダムス |
アブドゥルゼーズ・アデシナ | サンドロ | プレムクマール・シャンムガム | トビアス・ミックスナー | ジェレミー・ルブラン | ケルビン・オゲナーホロ | デビッド・J・フェリックス |
ブロディ・マッキー | スヴェンソンあたり | パトリック・ケイソン | イヴォ・イリッチ | アヴァニーシュ・トリパティ | バリベバス | ナビン・モーシー |
ティム・キンドバーグ | イオダール | マオ・ユーフェン | 彭傑 | ジェームス・ジー | アントン | ダムジャン・ルコビッチ |
スタニラ・アンドレイ | エクノラ・エゼキエル | ベン・ミチンソン | ジェス・テルフォード | シモ・アレクサンドロフ | ヘリクレス・エマヌエル | コディンキャット |
サム・ドーソン ? | hy2k | ピエール・オルテガ | ケレム・セブンカン | ハーベイハルウィン | マンスール・ベンユーセフ | アンドリュー・ギャリソン |
カルロス・ロドリゲス | ドワイト・ワトソン | チェイシンヒューズ | ナウエル・グレコ ? ? | パブロ・ロシャ | ダスティン・ラリマー ? | ジュリアノ・ファリアス |
ジョー・ベル ? | ヘニング・ポールマイヤー | シベルト・シュー・オルセン | アンドレイ・ラザレスク | ホセ・テイシェイラ ? | アドリアーノ・レゼンデ | ヴィクトル・バストス |
ヴィンセント | キャンディス ? ? | デイブ・バウマン | ティムコルバーガー ? | ステファン・メンサー ? | イスカンデルブローレ | ドミニク・シュメール |
パベル・ストレイク・ドレチェク | ケシャブ・ボーラ | オケジウク | クレイトン・ファリア | アンドリュー・エリス ? | ジョエル・ギャラント ? | ジャヤ・クリシュナ・ナンブル |
イフェオマ・イモー | ジェイソン・アドキソン ? | ゴーティエ・ロダロ ? | トム・ドーナル | サム・マーガリット ? | マーカス・ウッド | スペンサー・デュボール |
ジェイコブ・アリオラ | ケンリー・ジーン | デニス・モレロ ? | ウマル・ゴーラ | ザイクロトロップ-j | ホン・ソクウ | ヨ・ジュノ |
トーマス・シラー | サミュエル・カウフマン | ヨゼフ・ミクラシュ | ジョアン・ビクトル | 宮前裕一郎 | ギファ・エリヤント ? | ユジ |
ソンヒウォン | プラサンナ・ヴェンカテシュ TS | アントワーム | オサマ・アフマロ ? | ダナン ウィジャヤ | エレクトリックレザー ? | シュバム・カウシャル |
ペッター・セザー・モーエン | ハーマン・ナイガード | jnmsl | モハメド・サイード | サム・ポーダー | ドミニク・リー | フェラス・アロウダ ? |
JP ウンガレッティ | エンディカ・インツァウルティエタ | マット・ウェルズ | アナント・ジャイナ教 | トム・チェン ? | アーニー・ミランダ | ビョルク |
スジット・プラダン | アビシェク・カシャプ | クリスチャン・ジャコビッチ | アントニエル・マガリャンイス | グリコ・ニブラス ? | イマルバート | まっちゃ |
ハシブ・ハッサン | ジェイミー・ロルフス ? | スラビ グプタ | ニンガロ ? | モナエ | ウェイド・マクダニエル | ゴードン・ゴールドバック |
ビシュ | アミルカル・ムニョス | サマル・モハン | ジョアンパウロ・ロドリゲス | エイブリー・フリーマン | ダニエル・シュルツ ? ? | マイケル・キルベイン |
ngxコーダー | クリストファー・ギルトヴェット・セルベック | ヨハン・エーラース | ルーカス・バッハ | ラザール・ニコロフ ? | 岩田 ? | イ・スンチャン |
ポムセンス | 学生であること | 板倉達也 ? | 小谷ゆく ? | ヴァディム・デメデス |
(絵文字キー):
このプロジェクトは、全員参加者の仕様に従っています。あらゆる種類の貢献を歓迎します!
MIT © セグン・アデバヨ