快速构建可访问的 React 应用程序⚡️

Chakra UI 提供了一组可访问、可重用和可组合的 React 组件，使创建网站和应用程序变得超级容易。

寻找文档？📝

这是最新版本的 Chakra UI 的https://chakra-ui.com网站。对于旧版本，请到这里

• v1：https ://v1.chakra-ui.com
• v0: https://v0.chakra-ui.com

特征🚀

• 易于样式设置：Chakra UI 包含一组布局组件，例如 Box和 Stack，通过传递道具可以轻松设置组件样式。 学到更多
• 灵活且可组合：Chakra UI 组件构建在 React UI Primitive 之上，具有无限的可组合性。
• 无障碍。Chakra UI 组件遵循 WAI-ARIA 指南规范并具有正确的 aria-*属性。
• 黑暗模式😍：Chakra UI 中的大多数组件都兼容暗模式。

支持Chakra用户界面💖

通过捐赠 5 美元或更多，您可以支持该项目的持续发展。我们将不胜感激。感谢我们所有的支持者！🙏 [贡献]

个人

组织

与您的组织一起支持该项目。您的徽标将显示在此处，并带有指向您网站的链接。[贡献]

感言

人们经常向我扔 React 组件库和设计系统。这可能是我见过的最好的一个。API 很简单但可组合，并且我查看的几个组件的可访问性是完整的。

伟大的工作@thesegunadebayo，非常鼓舞人心的工作。– 瑞恩弗洛伦斯

来自@thesegunadebayo 的很棒的新开源组件库。真是令人印象深刻的东西！– 科尔姆图特

这是令人难以置信的工作。了不起的工作Segun！—— 李·罗宾逊

Chakra UI 太棒了！我喜欢始终如一地使用焦点造型和微妙的动画 ——Guillermo ▲

安装Chakra用户界面

要使用 Chakra UI 组件，您需要做的就是安装 @chakra-ui/react包及其对等依赖项：

$ 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以便您可以在应用程序中在明暗模式之间切换。

2. 现在你可以开始使用这样的组件了！：

import { Button } from "@chakra-ui/react"

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

有关如何开始的更多指南，请 点击此处

CodeSandbox 模板

• JavaScript 入门：https ://codesandbox.io/s/chakra-ui-javascript-lzzg9
• Typescipt入门：https ://codesandbox.io/s/chakra-ui-typescript-pomi8
• NextJS TypeScript Starter： https ://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

create-react-app模板

查看我们的指南，了解如何使用我们的官方 create-react-app模板。

贡献

想贡献吗？棒极了！我们有一个 贡献指南来帮助指导您。

我们的 docsite 位于一个 单独的 repo中。如果您有兴趣为文档做出贡献，请查看 docsite 贡献指南。