Chakra UI

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

目录

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

文档

这是 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