Chakra UI 是一个由可访问、可重用和可组合的 React 组件组成的综合库,可简化现代 Web 应用程序和网站的开发。该库提供了各种组件,可以轻松组合这些组件来构建复杂的用户界面,同时遵循可访问性最佳实践。
create-react-app
模板这是最新版本 Chakra UI 的 https://chakra-ui.com 网站。对于旧版本,请前往此处
Box
和Stack
,可以通过传递 props 轻松设置组件样式。了解更多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
模板的信息。
想要贡献吗?太棒了!我们有一份贡献指南来帮助指导您。
我们的文档站点位于一个单独的存储库中。如果您有兴趣为文档做出贡献,请查看文档站点贡献指南。
与您的组织一起支持该项目。您的徽标将显示在此处,并带有指向您网站的链接。 [贡献]
通过捐赠 5 美元或更多,您可以支持该项目的持续开发。我们将不胜感激一些支持。感谢我们所有的支持者! [贡献]
人们经常向我扔 React 组件库和设计系统。这可能是我见过的最好的一个。 API 很简单但可组合,而且我查看的几个组件的可访问性是完整的。
伟大的工作@thesegunadebayo,真正鼓舞人心的工作。 ——瑞安·弗洛伦斯
来自 @thesegunadebayo 的很棒的新开源组件库。真是令人印象深刻的东西! ——科尔姆·图伊特
这是一项令人难以置信的工作。 Segun 干得很棒! ——李·罗宾逊
Chakra UI 太棒了!我喜欢一贯使用焦点造型和微妙的动画 – Guillermo ▲
我们非常荣幸能够因 Chakra UI 为 JavaScript 生态系统带来的所有创新和影响力而获得社区的奖项和提及。
值得追求的解决方案技术雷达(2020-2021) | |
对社区最具影响力的贡献开源奖(2020 年) |
感谢这些优秀的人
塞贡·阿德巴约 ? ? | 蒂奥鲁瓦尼·科拉沃勒 ? | 德万什·杰斯玛拉尼 | 阿德里安·亚历山德烈 | 李 | 克里斯托夫·波杜斯洛 ? ? | 贾斯汀·霍尔 |
马克·钱德勒 | 阿格巴耶福拉萨德 ? | 克里斯蒂安·恩万巴 | 乔纳森·巴克布瓦 ? | 亚历克斯·梁 ? | 杰斯科·武斯特 | 尘土飞扬的多丽丝 |
亚历克斯·洛贝拉 | 托马索·德·罗西 | 奥迪 | 亨德里克·尼曼 | 马特·罗滕伯格 | 路易斯·费利佩·扎吉尼 | 让 |
特米托普·阿吉博耶 | 乔纳森·金 | 克里斯·汤普森 | 沃尔特·基马罗 | 杰克·莱斯利 | 肯-劳伦·达加尼奥 | 拉蒙 |
杰西 ? | 艾勒贡·卡约德·迈克尔 | 塔尔·威廉姆斯 | 特雷弗·布雷兹 ? | 戈德·李 | 阿格洛斯·阿尔瓦尼塔基斯 | 道格拉斯·加布里埃尔 |
马丁·诺德斯特伦 | 丹尼·塔托姆 | 西蒙·柯林斯 | 桑蒂阿尔博 | PILO7980 | 石本浩二 | 杰夫·温 |
巴勃罗·赛斯 | 内吉·拉夫尼克 | 朱利安·维亚拉 | 塞巴斯蒂安·特雷布纳克 | 亚当·普兰特 | 卢西奥·鲁本斯 | 贾森·米亚兹加 |
贡萨洛·波佐 | 基督教 ? | 克里斯蒂安·哈根多恩 | 安德烈·克拉斯诺夫 | 多尼·苏卡迪 | 猛 | 加布里埃莱·贝卢阿多 |
弗朗索瓦·贝斯特 | 何天慈 | 史蒂文 | 巴蒂斯特·阿德里安 | 罗布·贝文 | 托马斯 | 徐恺 |
大卫·威佩尔 | 纳文 | 文森特 | 奥萨马·奥尔多艾斯 | 弗雷德·K·肖特 | 贾里德·帕尔默 | 奥斯汀·瓦莱拉 |
托尼·纳洛克 | 托马斯·马克西米尼 | 大卫·鲍姆戈尔德 | 拉尔菲柳斯 | 拉胡尔·朗内卡 | 皮埃尔·内尔 | 皮埃尔·格里莫 |
威斯普研发 | 马克纳·斯穆茨 ? | 纳尔逊·赖茨 | 穆罕默德·奈纳尔 | 穆斯塔法·图尔汗 | 金·罗恩 | 麦家俊 |
杰里米·戴维斯 | 卢杰瑞 | 伊万·达尔梅特 ? | 狄龙·库里 | id函子 | 电气街 | 亚伦·亚当斯 |
阿卜杜拉齐兹·阿德什纳 | 桑德罗 | 普雷姆库玛·尚穆根 | 托比亚斯·梅克斯纳 | 杰里米·勒布朗 | 凯尔文·奥根纳霍罗 | 大卫·J·菲利克斯 |
布罗迪·麦基 | 佩尔·斯文森 | 帕特里克·卡森 | 伊沃·伊利奇 | 阿瓦内什·特里帕蒂 | 巴利贝巴斯 | 纳文穆迪 |
蒂姆·金德伯格 | 碘达尔 | 毛玉峰 | 彭杰 | 詹姆斯·吉 | 安东 | 达姆詹·卢科维奇 |
斯坦尼拉·安德烈 | 埃库诺拉·以西结 | 本·米钦森 | 杰西·特尔福德 | 西莫·亚历山德罗夫 | 埃里克勒斯·伊曼纽尔 | 科丁猫 |
萨姆·道森 ? | hy2k | 皮埃尔·奥尔特加 | 凯雷姆·塞文坎 | 哈维哈尔文 | 曼苏尔·本尤瑟夫 | 安德鲁·加里森 |
卡洛斯·罗德里格斯 | 德怀特·沃森 | 查辛色调 | 纳韦尔·格列柯 ? ? | 巴勃罗·罗查 | 达斯汀·拉里默 ? | 胡利亚诺·法里亚斯 |
乔·贝尔 ? | 亨宁·波尔迈尔 | 西维特·舒·奥尔森 | 安德烈·拉扎雷斯库 | 何塞·特谢拉 ? | 阿德里亚诺·雷森德 | 维克多·巴斯托斯 |
文森特 | 坎迪斯 ? ? | 戴夫·鲍曼 | 蒂姆·科尔伯格 ? | 斯蒂芬·门萨 ? | 伊斯坎德布勒尔 | 多米尼克·苏梅尔 |
帕维尔·斯特拉克·多莱切克 | 凯沙夫·博赫拉 | 奥凯济厄克 | 克莱顿·法利亚 | 安德鲁·埃利斯 ? | 乔尔·加兰特 ? | 贾亚·克里希纳·南布鲁 |
伊菲奥玛·伊莫 | 贾森·阿德克森 ? | 高蒂尔·罗达罗 ? | 汤姆·多纳尔 | 萨姆·玛格利特 ? | 马库斯·伍德 | 斯宾塞·杜鲍尔 |
雅各布·阿里奥拉 | 肯利·吉恩 | 丹尼斯·莫雷洛 ? | 奥马尔·戈拉 | Zyclotrop-j | 洪锡宇 | 杨俊浩 |
托马斯·西勒 | 塞缪尔·考夫曼 | 约瑟夫·米库拉斯 | 若昂·维克多 | 宫前雄一郎 | 吉法·埃里扬托 ? | 愚子 |
松熙院 | 普拉萨纳·文卡特什 TS | 安索姆 | 奥萨马·阿赫马罗 ? | 达南·维贾亚 | 电石 ? | 舒巴姆·考沙尔 |
彼得·萨瑟·摩恩 | 赫尔曼·尼加德 | 江南石化 | 穆罕默德·赛义德 | 萨姆·波德 | 多米尼克·李 | 费拉斯·阿卢达 ? |
JP翁加雷蒂 | 恩迪卡·因特克奥蒂塔 | 马特·威尔斯 | 阿南特·贾恩 | 汤姆·陈 ? | 厄尼·米兰达 | 比约吕克 |
苏吉特·普拉丹 | 阿布舍克·卡什亚普 | 克里斯蒂安·贾科维奇 | 安东尼尔·马加良斯 | 格里科·尼布拉斯 ? | 马尔伯特 | 姆查 |
哈西卜·哈桑 | 杰米·罗尔夫斯 ? | 素拉比笈多 | 宁加罗 ? | 莫奈 | 韦德·麦克丹尼尔 | 戈登·哥德巴赫 |
比什 | 阿米尔卡·穆尼奥斯 | 萨马尔·莫汉 | 若昂·保罗·罗德里格斯 | 艾弗里·弗里曼 | 丹尼尔·舒尔茨 ? ? | 迈克尔·基尔巴恩 |
ngx编码器 | 克里斯托弗·吉尔特维特·塞尔贝克 | 约翰·埃勒斯 | 卢卡斯·巴赫 | 拉扎尔·尼科洛夫 ? | 岩田 ? | 李承灿 |
pomSense | 学生 | 板仓龙也 ? | 小谷由久 ? | 瓦迪姆·德梅德斯 |
(表情符号键):
该项目遵循所有贡献者规范。欢迎任何形式的贡献!
麻省理工学院 © Segun Adebayo