chakra-ui - ⚡️Reactアプリケーション用のシンプルでモジュール式のアクセス可能なUIコンポーネント

(⚡️ Simple, Modular & Accessible UI Components for your React Applications)

Created at: 2019-08-17 22:27:54
Language: TypeScript
License: MIT

チャクラのロゴ

アクセシブルなReactアプリをスピードで構築する⚡️


バンドルサイズ 言語グレード:JavaScript MITライセンス NPMダウンロード Githubスター 不和


Chakra UIは、Webサイトやアプリの作成を非常に簡単にする、アクセス可能で再利用可能で構成可能なReactコンポーネントのセットを提供します。

ドキュメントをお探しですか?📝

これは、最新バージョンのChakraUIのhttps://chakra-ui.comWebサイトです。古いバージョンについては、こちらをご覧ください

特徴🚀

  • スタイリングのしやすさ:Chakra UIには、のようなレイアウトコンポーネントのセットが含まれており、
    Box
    小道具
    Stack
    を渡すことでコンポーネントのスタイルを簡単に設定できます。 もっと詳しく知る
  • 柔軟性と構成可能性:Chakra UIコンポーネントは、React UI Primitiveの上に構築されており、無限の構成可能性を実現します。
  • アクセス可能。Chakra UIコンポーネントは、WAI-ARIAガイドラインの仕様に従い、適切な
    aria-*
    属性を備えています。
  • ダークモード😍:Chakra UIのほとんどのコンポーネントは、ダークモードと互換性があります。

ChakraUIをサポートする💖

5ドル以上を寄付することで、このプロジェクトの進行中の開発をサポートできます。いくつかのサポートに感謝します。すべてのサポーターに感謝します!🙏 [貢献]

個人

組織

組織でこのプロジェクトをサポートします。あなたのロゴはあなたのウェブサイトへのリンクとともにここに表示されます。[貢献]

お客様の声

人々は定期的にReactコンポーネントライブラリと設計システムを私に投げかけます。これは私が見た中で最高のものかもしれません。APIはシンプルですが構成可能であり、私が調べたいくつかのコンポーネントのアクセシビリティは完全です。

素晴らしい仕事@thesegunadebayo、本当に刺激的な仕事。– ライアンフローレンス

@thesegunadebayoからの素晴らしい新しいオープンソースコンポーネントライブラリ。本当に印象的なもの!– Colm Tuite

これは素晴らしい仕事です。素晴らしい仕事セグン!– リー・ロビンソン

チャクラUIは素晴らしいです!フォーカススタイリングと微妙なアニメーションの一貫した使用が大好きです –Guillermo▲

ChakraUIのインストール

@chakra-ui/react
Chakra UIコンポーネントを使用するには、パッケージとそのピア依存関係をインストールするだけです 。

$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# or

$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

使用法

コンポーネントの使用を開始するには、次の手順に従ってください。

  1. @ chakra-ui/react
    ChakraProvider
    によって提供される アプリケーションでラップします。
import { ChakraProvider } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

オプションで、アプリケーションをラップして

ColorModeProvider
、アプリ内でライトモードとダークモードを切り替えることができます。

  1. これで、次のようなコンポーネントの使用を開始できます!:
import { Button } from "@chakra-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

開始方法に関するその他のガイドは、こちらから入手でき ます。

CodeSandboxテンプレート

create-react-app
テンプレート

公式

create-react-app
テンプレートの使用方法については、ガイドをご覧ください。

貢献

貢献したいですか?すごい!私たちは あなたを導くのを助けるために貢献するガイドを持っています。

私たちのドキュメントは 別のリポジトリにあります。ドキュメントへの寄稿に興味がある場合は、 docsite寄稿ガイドをご覧ください。

寄稿者

これらの素晴らしい人々に感謝します


セグン・アデバヨ

💻 🚧 📖 💡 🎨

Tioluwani Kolawole

📖 💡 🚧

Devansh Jethmalani

💻

エイドリアン・エイキサンドレ

💻 📖

リー

📖

KristófPoduszló

💻 🤔 🐛 📖

ジャスティンホール

💻

マークチャンドラー

💻 ⚠️ 📖 🚧

Folasade Agbaje

💻 🤔

クリスチャン・ヌワンバ

📖

ジョナサン・バケブワ

📖 🤔

アレックス・ルオン

💻 🔌

JescoWüster

💻

ダスティドリス

💻

アレックスロベラ

💻

トムマソデロッシ

💻

オーディ

💻

ヘンドリック・ニーマン

💻

マット・ローゼンバーグ

💻 💡

ルイス・フェリペ・ザギニ

💻

ジャン

💻

テミトープアジボエ

📖

ジョナサン・キム

💻

クリス・トンプソン

💻

ウォルターキマロ

💻

ジャック・レスリー

💻

ケンローレンダガニオ

💻

ラモン

💻

ジェス

📖 🔍

Ayelegun Kayode Michael

💻

タルウィリアムズ

💻

トレバーブレード

💻 📖 🐛

ゴードリー

💻

Aggelos Arvanitakis

💻

ダグラスガブリエル

💻

MartinNordström

💻

ダニー・タトム

💻

サイモン・コリンズ

💻

サンティアルボ

💻 📖

PILO7980

💻

石本麹

💻

ジェフ・ウェン

💻

パブロ・サエズ

💻

Nejc Ravnik

💻

ジュリアンビアラ

💻

セバスチャン・トレブナック

💻 📖

アダムプランテ

💻

ルシオ・ルーベンス

💻

ジェイソン・ミアズガ

💻 📖

ゴンザロポッツォ

💻

キリスト教徒

💻 🚇

クリスチャン・ハーゲンドルン

💻

アンドレイ・クラスノフ

💻

ドニー・スカルディ

💻


💻

Gabriele Belluardo

💻

フランソワベスト

💻

Tianci He

💻

スティーブン

💻

バプティストエイドリアン

💻

ロブ・ビーヴァン

💻

トマシュ

💻

徐愷

💻

デビッドウィッペル

💻

Naveen

💻

ヴィンセント

💻

Osamah Aldoaiss

💻

フレッドK.ショット

💻

ジャレッド・パーマー

💻

オースティンワレラ

💻

トニー・ナーロック

💻 📖

トーマスマキシミニ

💻

デビッドバウムゴールド

💻

ralphilius

💻

Rahul Rangnekar

💻

ピエールネル

💻

ピエールグリモー

💻

Whisp R&D

💻

マケナ・スムッツ

💻 📖 🤔

ネルソン・ライツ

💻

モハメド・ナイナー

📖

ムスタファ・ターハン

📖

キム・ローエン

📖

ジャスティン・マック

💻

ジェレミー・デイビス

💻

ジェレミー・ルー

📖 💻

Ivan Dalmet

📖 💻 🔌

ディロンカレー

💻

idfunctor

💻

デンキ街

💻

アーロン・アダムス

💻

Abdulazeez Adeshina

💻

Sandro

💻

Premkumar Shanmugam

💻

トビアス・メイクスナー

💻

ジェレミー・ルブラン

💻

ケルビン・オゲナーホロ

💻

デビッドJ.フェリックス

💻

ブロディマッキー

📖

スベンソンあたり

💻

パトリック・ケイソン

📖

IvoIlić

💻

Avaneesh Tripathi

💻

バリベバス

📖

Navin Moorthy

💻 📖

ティム・キンドバーグ

📖

iodar

📖

マオユフェン

📖

鵬傑

💻 📖

ジェームズ・ジー

💻 ⚠️ 💡

アントン

📖

ダムジャン・ルコビッチ

📖

スタニラ・アンドレイ

💻

エクノラエゼキエル

💻

ベンミッチンソン

📖

ジェス・テルフォード

💻

シモ・アレクサンドロフ

📖

ヘリクルズエマニュエル

💻

CodinCat

📖

サムドーソン

🤔

hy2k

💻

ピエールオルテガ

💻

ケレムセブンカン

📖

ハーベイハルウィン

📖

Mansour benyoucef

📖

アンドリュー・ギャリソン

📖

カルロスロドリゲス

📖

ドワイト・ワトソン

📖

ChasinHues

📖

ナウエル・グレコ

📆 🐛

パブロロシャ

📖

ダスティン・ラリマー

💻 🎨

ジュリアーノファリアス

📖

ジョーベル

🐛 💻

ヘニング・ポールマイヤー

💻

Sivert Schou Olsen

📖

アンドレイ・ラザレスク

📖

ホセ・テイシェイラ

🐛

アドリアーノ・レゼンデ

📖

ビクターバストス

📖

ヴィンセント

📖

キャンディス

🎨 🐛 📖

デイブバウマン

📖

ティムコルバーガー

🐛 📖 💻

ステファン・メンサー

🐛

iskanderbroere

📖

ドミニク・スマー

💻

Pavel'Strajk' Dolecek

📖

ケシャフ・ボーラ

📖

okezieuc

📖

クレイトンファリア

📖

アンドリューエリス

💻 🐛 📖

ジョエル・ギャラン

🐛

ジャヤクリシュナナンブル

💻

イフェオマ・イモウ

📖

ジェイソン・アドキソン

🐛

ゴーティエ・ロダロ

🐛

トム・ドーナル

💻

サム・マルガリット

🐛

マーカスウッド

💻

スペンサーデュボール

📖

ジェイコブ・アリオラ

📖

ケンリージャン

📖

デニス・モレロ

🐛

ウマルゴラ

📖

Zyclotrop-j

💻

ホンソクウ

📖

ジュンホ・ヨー

📖

トーマス・シラー

⚠️ 💻

サミュエル・カウフマン

📖

JozefMikuláš

💻

ジョアン・ヴィクトル

💻

宮前雄一郎

📖

ギファ・エリヤント

🐛

ユジ

⚠️ 💻

ソンヒウォン

📖

プラザンナベンカテッシュTS

📖

anthowm

📖

オサマアーマロ

🐛

ダナンウィジャヤ

📖

選挙人

🐛

Shubham Kaushal

📖

PetterSætherMoen

📖

ハーマン・ナイガード

📖

jnmsl

📖

モハメドは言った

💻

サム・ポーダー

📖

ドミニク・リー

📖 💻

Feras Aloudah

🤔

JPウンガレッティ

📖

Endika Intxaurtieta

📖

マットウェルズ

💻

アナント・ジャイン

📖

トム・チェン

📖 🚇

アーニーミランダ

📖

bjoluc

📖

スジット・プラダン

📖 💻

Abhishek Kashyap

📖

クリスチャン・ジャコビッチ

💻

アントニエル・マガリャエス

💻

グリコニブラス

🤔 💻

イマルバート

📖

mcha

💻 ⚠️

Hasib Hassan

📖

ジェイミー・ロルフス

🤔 📖 💻

スラビグプタ

📖

ニンガロ

🐛

モナエ

💻

ウェイドマクダニエル

📖

ゴードンゴールドバッハ

💻

ビッシュ

💻

Amilkar Munoz

📖

サマール・モハン

💻

ジョアンパウロロドリゲス

📖

エイブリーフリーマン

📖

ダニエル・シュルツ

🐛 💻 📖 🤔

マイケル・キルベーン

💻

ngxCoder

💻

Kristofer Giltvedt Selbekk

📖

ヨハン・エーラーズ

📖 💻

ルーカス・バッハ

💻

ラザールニコロフ

🐛

岩田

🐛 💻

イ・スンちゃん

💻

pomSense

💻

絵文字キー):

このプロジェクトは、 すべての貢献者 の仕様に従います。どんな種類の貢献も歓迎します!

によってサポートされているテスト

BrowserStack

ライセンス

MIT© SegunAdebayo