Chakra UI

Chakra UI 是一个全面的可访问、可复用和可组合的 React 组件库，它简化了现代 Web 应用和网站的开发。该库提供了各种各样的组件，可以轻松地组合起来构建复杂的用户界面，同时遵循可访问性最佳实践。

目录

• 📋 文档
• 🚀 特性
• 📦 安装
• 💻 使用
• 📚 CodeSandbox 模板
• 📖 create-react-app 模板
• 📝 贡献
• 💖 支持 Chakra UI
• 🙌 推荐
• 🏆 奖项和提及
• ✨ 贡献者
• ⚖️ 许可证

文档

这是 https://chakra-ui.com 网站，提供 Chakra UI 的最新版本。对于旧版本，请访问此处

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

特性

• 易于样式化：Chakra UI 包含一组布局组件，如 Box 和 Stack，通过传递 props 可以轻松地为组件设置样式。了解更多
• 灵活且可组合：Chakra UI 组件构建在 React UI 原语之上，实现无限的可组合性。
• 可访问性：Chakra UI 组件遵循 WAI-ARIA 指南规范，并具有正确的 aria-* 属性。
• 暗黑模式 😍：Chakra UI 中的大多数组件都兼容暗黑模式。

安装

要使用 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

使用

要开始使用这些组件，请按照以下步骤操作

1. 使用 @chakra-ui/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 包裹您的应用程序，以便在您的应用程序中在亮模式和暗模式之间切换。

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
• TypeScript 入门：https://codesandbox.io/s/chakra-ui-typescript-pomi8
• NextJS TypeScript 入门：https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

create-react-app 模板

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

贡献

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

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

支持 Chakra UI

组织

通过您的组织支持此项目。您的徽标将显示在此处，并链接到您的网站。[贡献]

个人

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

推荐

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

@thesegunadebayo 干得漂亮，非常鼓舞人心的工作。– Ryan Florence

来自 @thesegunadebayo 的很棒的新开源组件库。非常令人印象深刻！– Colm Tuite

这是一项不可思议的工作。Segun，干得漂亮！– Lee Robinson

Chakra UI 太棒了！我喜欢焦点样式的一致使用以及微妙的动画 – Guillermo ▲

奖项和提及

我们非常荣幸地收到社区颁发的奖项和提及，感谢 Chakra UI 为 JavaScript 生态系统带来的所有创新和影响。

贡献者

感谢这些优秀的人们

（表情符号键）

此项目遵循 all-contributors 规范。欢迎任何形式的贡献！

测试由以下机构支持

许可证

MIT © Segun Adebayo